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内 容 简 介 


本 书 重 点 讲解 基于 XHTML 、div+CSS、JavaScript 和 jQuery 的 Web 标准 网 页 设计 原理 与 前 端 开发 技 
术 ， 内 容 包括 网 站 与 网 页 、 使 用 Fireworks 制作 图 片 、 使 用 Flash 制作 动画 、 超 文本 标记 语言 、CSS 基础 、 
可 扩展 超 文本 标记 语言 、 应 用 div+CSS 布局 网 页 、 使 用 Dreamweaver 设计 和 制作 网 页 、 使 用 Dreamweaver 
建设 网 站 、JavaScript 基础 、JavaScript 内 置 对 象 、 处 理 和 验证 表单 数据 、BOM 和 DOM、DHTML 、jQuery 
基础 等 。 

本 书 以 HTML 4.01、XHTML 1.0、CSS 2.1 和 ECMA-262 5.1 等 技术 规范 为 基础 ， 不 仅 注重 原理 、 技 
术 与 应 用 三 者 的 结合 ， 而 且 具 有 概念 简洁 、 深 入 浅 出 、 代 码 规范 、 前 后 呼应 、 面 向 应 用 和 范例 典型 等 特 
点 。 通 过 学 习 本 书 ， 可 以 了 解 基于 “内 容 、 结 构 、 表 现 和 行为 ”层次 模型 的 Web 标准 网 页 设计 原理 ， 掌 
握 XHTML、div+CSS、JavaScript、JSON 和 jQuery 等 主流 的 Web 前 端 开发 技术 ， 为 学 习 动态 网 页 设计 原 
理 与 制作 技术 做 好 准备 。 本 书 主要 面向 教学 〈 应 用 ) 型 大 学 的 电子 商务 、 信 息 管理 与 信息 系统 、 计 算 机 
科学 与 技术 、 软 件 工程 等 相关 专业 ， 可 作为 “网 页 设计 与 制作 ”和 “互联 网 前 端 开发 技术 ”课程 的 教材 。 
此 外 ， 本 书 还 可 用 作 相 关 培 训 教 材 或 教学 参考 书 ， 也 可 供 网 站 开发 与 管理 人 员 参 考 。 
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随 着 我 国 改革 开放 的 进一步 深化 ， 高 等 教育 也 得 到 了 快速 发 展 ， 各 地 高 校 紧 密 结合 
方 经 济 建设 发 展 需 要 , 科学 运用 市 场 调节 机 制 , 加 大 了 使 用 信息 科学 等 现代 科学 技术 提升 、 
改造 传统 学 科 专业 的 投入 力度 ， 通 过 教育 改革 合理 调整 和 配置 了 教育 资源 ， 优 化 了 传统 学 
科 专 业 ， 积 极为 地 方 经 济 建设 输送 人 才 ， 为 我 国 经 济 社会 的 快速 、 健 康 和 可 持续 发 展 以 及 
高 等 教育 自身 的 改革 发 展 做 出 了 巨大 贡献 。 但 是 ， 高 等 教育 质量 还 需要 进一步 提高 以 适应 
经 济 社会 发 展 的 需要 , 不 少 高 校 的 专业 设置 和 结构 不 尽 合理 , 教师 队伍 整体 素质 亚 待 提高 ， 
人 才 培 养 模式 、 教 学 内 容 和 方法 需要 进一步 转变 ， 学 生 的 实践 能 力 和 创新 精神 豚 待 加 强 。 

教育 部 一 直 十 分 重视 高 等 教育 质量 工作 。2007 年 1 月 ， 教 育 部 下 发 了 《关于 实施 高 等 
学 校本 科教 学 质量 与 教学 改革 工程 的 意见 》 计划 实施 “高 等 学 校本 科教 学 质量 与 教学 改革 
工程 〈 简 称 “ 质 量 工程 )”， 通 过 专业 结构 调整 、 课 程 教材 建设 、 实 践 教学 改革 、 教 学 团队 
建设 等 多 项 内 容 ， 进 一 步 深 化 高 等 学 校 教学 改革 ， 提 高 人 才 培 养 的 能 力 和 水 平 ， 更 好 地 满 
足 经 济 社会 发 展 对 高 素质 人 才 的 需要 。 在 贯彻 和 落实 教育 部 “质量 工程 ”的 过 程 中 ， 各 地 
高 校 发 挥 师资 力量 强 、 办 学 经 验 丰 富 、 教 学 资源 充裕 等 优势 , 对 其 特色 专业 及 特色 课程 ( 群 ) 
加 以 规划 、 整 理 和 总 结 ， 更 新 教学 内 容 、 改 革 课 程 体系 ， 建 设 了 一 大 批 内 容 新 、 体 系 新 、 
方法 新 、 手 段 新 的 特色 课程 。 在 此 基础 上 ， 经 教育 部 相关 教学 指导 委员 会 专家 的 指导 和 建 
议 ， 清 华 大 学 出 版 社 在 多 个 领域 精 选 各 高 校 的 特色 课程 ， 分 别 规划 出 版 系列 教材 ， 以 配合 
“质量 工程 ”的 实施 ， 满 足 各 高 校 教学 质量 和 教学 改革 的 需要 。 

为 了 深入 贯彻 落实 教育 部 《关于 加 强 高 等 学 校本 科教 学 工作 ， 提 高 教学 质量 的 若干 意 
见 》 精 神 ， 紧 密 配 合 教育 部 已 经 启动 的 “高 等 学 校 教学 质量 与 教学 改革 工程 精品 课程 建设 
工作 ” 在 有 关 专家 、 教 授 的 倡议 和 有 关 部 门 的 大 力 支持 下 ,我 们 组 织 并 成 立 了 “清华 大 学 
出 版 社 教材 编审 委员 会 ”( 以 下 简称 “ 编 委 会 ”), 旨 在 配合 教育 部 制定 精品 课程 教材 的 出 版 
规划 , 讨论 并 实施 精品 课程 教材 的 编写 与 出 版 工作 。“ 编 委 会 ”成 员 皆 来 自 全 国 各 类 高 等 学 
校 教学 与 科研 第 一 线 的 骨干 教师 ， 其 中 许多 教师 为 各 校 相关 院 、 系 主管 教学 的 院 长 或 系 
主任 。 

按照 教育 部 的 要 求 ,“ 编 委 会 ”一 致 认为 ， 精 品 课程 的 建设 工作 从 开始 就 要 坚持 高 标 
准 、 严 要 求 ， 处 于 一 个 比较 高 的 起 点 上 ; 精品 课程 教材 应 该 能 够 反映 各 高 校 教学 改革 与 课 
程 建设 的 需要 ， 要 有 特色 风格 、 有 创新 性 新 体系 、 新 内 容 、 新 手段 、 新 思路 ， 教 材 的 内 
容 体 系 有 较 高 的 科学 创新 、 技 术 创 新 和 理念 创新 的 含量 )、 先 进 性 (对 原 有 的 学 科 体 系 有 实 
质 性 的 改革 和 发 展 , 顺应 并 符合 21 世纪 教学 发 展 的 规律 , 代表 并 引领 课程 发 展 的 趋势 和 方 
向 )、 示 范 性 (教材 所 体现 的 课程 体系 具有 较 广泛 的 辐射 性 和 示范 性 ) 和 一 定 的 前 瞻 性 。 教 
材 由 个 人 申报 或 各 校 推 荐 (通过 所 在 高 校 的 “ 编 委 会 ”成 员 推 荐 ), 经 “ 编 委 会 ”认真 评审 ， 
最 后 由 清华 大 学 出 版 社 审定 出 版 。 
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目前 ， 针 对 计算 机 类 和 电子 信息 类 相关 专业 成 立 了 两 个 “ 编 委 会 ”， 即 “清华 大 学 出 
版 社 计算 机 教材 编审 委员 会 ”和 “清华 大 学 出 版 社 电 子 信息 教材 编审 委员 会 推出 的 特色 





精品 教材 包括 : 

(1) 21 世纪 高 等 学 校规 划 教材 计算 机 应 用 一 一 高 等 学 校 各 类 专业 ， 特 别 是 非 计算 机 
专业 的 计算 机 应 用 类 教材 。 

(2) 21 世纪 高 等 学 校规 划 教材 。 计算 机 科学 与 技术 一 一 高 等 学 校 计算 机 相关 专业 的 
教材 。 


(3) 21 世纪 高 等 学 校规 划 教材 。 电子 信息 一 一 高 等 学 校 电子 信息 相关 专业 的 教材 。 
(4) 21 世纪 高 等 学 校规 划 教 材 。 软 件 工程 一 一 高 等 学 校 软 件 工程 相关 专业 的 教材 。 
(5) 21 世纪 高 等 学 校规 划 教材 。 信 息 管理 与 信息 系统 。 

(6) 21 世纪 高 等 学 校规 划 教 材 。 财经 管理 与 应 用 。 
(7) 21 世纪 高 等 学 校规 划 教 材 。 电子 商务 。 

(8) 21 世纪 高 等 学 校规 划 教材 。 物 联网 。 

















清华 大 学 出 版 社 经 过 三 十 多 年 的 努力 ， 在 教材 尤其 是 计算 机 和 电子 信息 类 专业 教材 出 
版 方面 树立 了 权威 品牌 ， 为 我 国 的 高 等 教育 事业 做 出 了 重要 贡献 。 清 华 版 教材 形成 了 技术 
准确 、 内 容 严 谨 的 独特 风格 ， 这 种 风格 将 延续 并 反映 在 特色 精品 教材 的 建设 中 。 


清华 大 学 出 版 社 教材 编审 委员 会 
联系 人 : 魏 江 江 


E-mail:weijj@tup.tsinghua.edu.cn 





计算 机 专业 知识 的 讲授 需要 在 一 系列 相关 课程 中 循序 渐进 地 进行 ， 同 时 需要 特别 注重 
相关 知识 点 的 前 后 顺序 一 一 只 有 在 学 生 了 解 和 掌握 前 期 知识 点 的 前 提 下 ， 才 有 可 能 更 有 效 
地 讲授 后 期 知识 点 。 例 如 ， 以 网 站 开发 与 管理 为 例 ， 所 涉及 的 专业 知识 点 既 包 括 HTML、 
XHTML、div+CSS、JavaScript、JSON 以 及 jQuery 等 Web 前 端 开 发 技术 ， 又 包括 数据 库 、 
ASPNET、PHP、C# 以 及 Java 等 网 站 后 台 开 发 技术 和 编程 语言 。 其 中 ，Web 前 端 开发 技术 
相对 独立 于 网 站 后 台 开 发 技术 一 一 在 不 涉及 网 站 后 台 开 发 技术 的 情况 下 ， 即 可 全 面 地 讲授 
Web 前 端 开发 技术 。 另 一 方面 ， 讲 授 Web 前 端 开发 技术 所 需 的 教学 和 实验 平台 易于 搭建 ， 
不 需要 安装 过 于 复杂 和 大 型 的 专业 软件 。 因 此 ，Web 前 端 开 发 技术 适宜 作为 前 期 知识 点 ， 
而 将 网 站 后 台 开 发 技术 作为 后 期 知识 点 。 此 外 ， 还 应 该 为 各 个 知识 点 的 讲授 分 配 必要 的 时 
间 资 源 。 如 果 在 短期 内 密集 地 讲授 较 多 的 知识 点 , 容易 增加 学 生理 解 和 掌握 知识 点 的 难度 ， 
甚至 造成 学 生 的 专业 知识 学 习 只 是 一 个 “加 回春 京 ”的 经 历 。 

本 书 内 容 并 不 覆盖 网 站 开发 与 管理 所 涉及 的 所 有 知识 点 ， 而 是 从 面向 应 用 的 角度 出 
发 ， 集 中 并 详细 讲解 基于 “内 容 、 结 构 、 表 现 和 行为 ”层次 模型 的 Web 标准 网 页 设计 原理 
与 前 端 开 发 技术 。 全 书 共 分 15 章 ， 内 容 包括 网 站 与 网 页 、 使 用 Fireworks 制作 图 片 、 使 用 
Flash 制作 动画 、 超 文本 标记 语言 、CSS 基础 、 可 扩展 超 文 本 标记 语言 、 应 用 div+CSS 布 
局 网 页 、 使 用 Dreamweaver 设计 和 制作 网 页 、 使 用 Dreamweaver 建设 网 站 、JavaScript 基 
础 、JavaScript 内 置 对 象 、 处 理 和 验证 表单 数据 、 BOM 和 DOM、DHTML、jQuery 基础 等 。 

本 书 的 编著 力求 遵循 以 下 原则 。 

(1) 注重 理论 、 技 术 与 应 用 的 紧密 结合 ， 尤 其 突出 技术 的 应 用 。 

(2) 章节 之 间 前 后 呼应 。 前 面 章节 的 知识 点 、 例 题 及 习题 为 后 面 章 节 的 知识 点 学 习 进 
行 铺垫 ， 后 面 章 节 的 例题 及 习题 既 针 对 本 章 的 知识 点 ， 又 结合 和 复习 前 面 章 节 的 相关 知 
识 点 。 

(3) 重点 突出 ， 内 容 紧 次 。 精 选 各 章 关键 知识 点 和 核心 技术 ， 并 围绕 关键 知识 点 和 核 
心 技术 深入 展开 ， 从 而 避免 面面俱到 和 “ 晴 晓 点 水 ” 式 的 介绍 。 

本 书 中 使 用 的 Dreamweaver 软件 提供 了 可 视 化 编程 功能 ， 通 过 菜单 命令 、 对 话 框 以 及 
鼠标 操作 能 够 自动 生成 很 多 XHTML 和 CSS 代码 , 但 建议 学 习 者 在 上 机 练习 时 尽量 使 用 记 
事 本 (Notepad) 软件 编写 XHTML、CSS 和 JavaScript 代码 ， 因 为 “手写 代码 ”是 很 多 用 
人 单位 对 “Web 前 端 开 发 ”相关 职位 的 基本 要 求 之 一 。 更 重要 的 是 ， 通 过 “手写 代码 ”能 
够 使 学 习 者 更 好 地 掌握 相关 知识 点 。 

通过 本 书 的 学 习 , 读者 能 够 了 解 和 掌握 HIML、 XHTML、 div+CSS、JavaScript、 JSON 
和 jQuery 等 主流 的 Web 前 端 开发 技术 ， 并 为 学 习 动 态 网 页 设计 原理 与 制作 技术 做 好 准备 。 

本 书 主要 面向 教学 〈 应 用 ) 型 大 学 的 电子 商务 、 信 息 管理 与 信息 系统 、 计 算 机 科学 与 
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技术 、 软 件 工程 等 相关 专业 ， 可 作为 “网 页 设计 与 制作 ”和 “互联 网 前 端 开发 技术 ”课程 
的 教材 。 此 外 ， 本 书 还 可 用 作 相关 培训 教材 或 教学 参考 书 ， 也 可 供 网 站 开发 与 管理 人 员 参 
考 。 

本 书 由 西 华 大 学 的 崔 敬 东 、 徐 雷 共同 编著 。 其 中 ， 崔 敬 东 负 责 第 4 一 15 章 ， 徐 雷 负责 
第 1 一 3 章 。 此 外 ,本 书 的 出 版 还 得 到 清华 大 学 出 版 社 有 关 工作 人 员 的 大 力 支持 。 在 此 向 他 
(她 ) 们 表示 诚挚 的 感谢 ! 

欢迎 高 校 老师 、 同 学 和 其 他 读者 选用 本 书 ， 并 敬 请 各 位 对 书 中 内 容 提 出 批评 意见 或 改 
进 建议 。 如 果 授 课 教师 在 本 书 的 使 用 过 程 中 还 有 其 他 需求 ， 可 通过 出 版 社 与 作者 联系 。 
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随 着 信息 通信 技术 (Information and Communication Technology，ICT) 的 快速 发 展 和 
广泛 应 用 ， 人 类 社会 对 信息 资源 共享 和 信息 交换 的 需求 越 来 越 强烈 。 同 样 ， 计 算 机 网 络 万 
其 是 互联 网 技术 的 发 展 和 应 用 ， 也 是 为 了 更 好 地 实现 信息 资源 共享 和 信息 交换 。 


@ 互联 网 与 万 维 网 


互联 网 (Intemet) 又 称 因 特 网 ， 意 为 “互相 连接 在 一 起 的 计算 机 网 络 ”。 在 互联 网 中 
利用 专门 的 技术 和 协议 (例如 TCP/IP 和 FTP) ， 能 够 将 全 球 的 计算 机 连接 在 一 起 ， 从 而 实 
现 信息 资源 共享 和 信息 交换 。 而 万 维 网 (World Wide Web，WWW) 则 建立 在 互联 网 基础 
a 

万 维 网 的 核心 包括 三 个 部 分 。 

(1) 超 文本 标记 语言 (HyperText Markup Language，HTML) ， 其 主要 作用 是 定义 
HTML 文档 ( 即 网 页 ) 的 内 容 和 结构 。 对 于 信息 资源 的 创建 者 和 提供 者 而 言 ， 使 用 网 页 ， 
能 够 将 互联 网 中 的 信息 资源 以 结构 化 和 可 视 化 的 形式 进行 有 效 组 织 。 而 在 信息 资源 的 需求 
方 ， 使 用 Web 浏览 器 (Web Browser) 打开 网 页 ， 能 够 轻松 识别 和 访问 互联 网 中 的 信息 

(2) 超 文 本 传送 协议 (HyperText Transfer Protocol，HTTP) 负责 Web 浏览 器 和 服务 器 
之 间 的 信息 交换 。 

(3) 统一 资源 标识 符 (Uniform Resource Identifier，URI) 是 用 于 标识 互联 网 中 信息 资 
源 的 字符 串 。URI 可 被 视 为 统一 资源 名 称 (Uniform Resource Name，URN) 、 统 一 资源 定 
位 符 (Uniform Resource Locator，URL ) 或 两 者 兼备 。URN 如 同一 个 人 的 姓名 ， 而 URL 
则 如 同一 个 人 的 住址 。 如 果 说 ，URN 是 对 互联 网 中 某 一 信息 资源 的 命名 ， 那 么 ，URL 则 定 
义 信 息 资源 在 互联 网 中 的 位 置 。 因 此 ，URL 能 够 提供 在 互联 网 中 查找 该 信息 资源 的 路 径 。 

URL 的 标准 格式 如 下 : 

协议 类 型 :/ /服务 器 地 址 (必要 时 需 加 上 端口 号 ) /路 径 / 文 件 名 


例如 ， 统 一 资源 定位 符 http://www.sina.com 表示 使 用 HTTP 访问 新 浪 网 。 
在 万 维 网 的 推广 和 发 展 过 程 中 ， 万 维 网 联盟 (World Wide Web Consortium，W3C) 发 
挥 着 重要 作用 。W3C 是 于 1994 年 10 月 在 麻 省 理工 学 院 计 算 机 科学 实验 室 成 立 的 ， 发 起 者 
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是 万 维 网 的 创建 者 Tim Bemers-Lee。W3C 是 一 个 专门 负责 制定 WWW 技术 规范 和 标准 的 
非 营利 性 组 织 ， 像 HIML、XHTML、CSS、XML 等 技术 标准 就 是 由 W3C 制 定 的 ， 这 些 技 
术 标 准 公开 发 布 在 W3C 网 站 (www.w3.org) 上 。W3C 会 员 包括 生产 技术 产品 及 服务 的 厂 
商 、 内 容 供应 商 、 团 体 用 户 、 研 究 实验 室 、 标 准 制定 机 构 和 政府 部 门 ， 会 员 们 协同 工作 ， 
致力 于 在 WWW 发 展 方向 上 形成 共识 。 











(2 服务器、 客户 机 和 Web 浏览 


在 互联 网 中 实现 信息 资源 共享 ， 主 要 采用 浏览 器 /服务 器 (Browser/Server) 的 网 络 结 
构 模 式 。 

在 如 图 1-1 所 示 的 B/S 结构 中 ， 服 务 器 是 提供 信息 资源 的 计算 机 。 制 作 网 页 并 在 网 页 
中 使 用 超 链接 对 信息 资源 进行 可 视 化 的 标记 和 定位 ， 是 在 服务 器 上 组 织 信息 资源 的 常见 形 
式 。 客 户 机 是 需要 信息 资源 的 计算 机 ， 在 客户 机 上 安装 有 Web 浏览 器 软件 (如 微软 mternet 
Explorer、 谷 歌 Chrome 或 Mozilla Firefox) 。 在 客户 机 上 使 用 Web 浏览 器 软件 ， 即 可 访问 
或 获取 服务 器 中 的 信息 资源 。 

1》 通过 浏览 器 并 (3) 读 取 URL 指 

Be i 

2 (2) 页 面 访问 请 求 通过 


QQ 互联 网 传送 至 服务 器 
< DE 


客户 机 (4) 将 页 面 文件 通过 服务 器 
互联 网 返回 给 客户 机 















(5) 在 浏览 器 
中 显示 页 面 


1-1 B/S 结构 


以 访问 常用 网 站 为 例 ， 在 客户 机 上 获取 服务 器 中 的 信息 资源 的 整个 过 程 可 以 分 解 
如 下 : 

(1) 在 客户 机 上 ， 通 过 正 浏览 器 的 地 址 栏 输 入 网 址 (如 www.sina.com)， 然 后 按 回 车 
(Enter) 键 ， 即 可 将 URL 形式 的 页 面 访问 请 求 发 往 互联 网 。 

(2) 从 客户 机 发 出 的 页 面 访问 请 求 通过 互联 网 传送 至 服务 器 。 

(3) 在 接收 到 来 自 客户 机 的 页 面 访问 请 求 后 ， 服 务 器 按照 HITP 的 约定 ， 并 根据 其 中 
的 URL 读 取 相 应 的 页 面 文件 ， 然 后 将 页 面 文件 发 往 互联 网 。 

(4) 从 服务 器 发 出 的 页 面 文件 通过 互联 网 传送 至 客户 机 。 

(5) 在 接收 到 来 自 服务 器 的 页 面 文件 后 ， 客 户 机 按照 HTTP 的 约定 , 并 通过 正 浏览 器 
显示 网 页 。 在 网 页 中 单 击 超 链接 ， 客 户 机 可 以 将 页 面 访问 请 求 再 次 发 往 互 联网 。 
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根据 StatCounter 公司 2017 年 10 月 的 统计 数据 ， 在 全 球 使 用 的 Web 浏览 器 中 ， 市 场 
份额 从 高 到 低 依次 是 Chrome (54.57%) 、Safari (14.59%) 、UC Browser (7.86%) 、Firefox 
(6.08%) 、Opera (3.89%) ~、 IE (3.74%) 。 

而 在 中 国 市 场 ， 不 同 桌 面 浏 览 器 (Desktop Browser) 的 市 场 份 额 从 高 到 低 依次 是 
Chrome (61.62%) 、 IE (11.83%) 、QQ Browser (7.08%) 、Sogou Explorer (5.98%) 、 
Firefox (4.61%) 、Edge (2.31%) 。 


(3 网 页 与 HTML 


所 谓 网 页 (Web page) ， 通 常 是 指使 用 超 文 本 标记 语言 (HyperText Markup Language， 
HTML) 编写 的 、 具 有 特定 结构 和 格式 的 电子 文件 。 因 此 ， 网 页 又 称 HTML 文档 。 
HTML 文档 是 由 元 素 (Element) 定义 和 组 成 的 ， 元 素 的 基本 格式 是 : 
< 元 素 名 > 内 容 </ 元 素 名 > 
其 中 ，< 元 素 名 > 称 为 开始 标签 (Start Tag) ，</ 元 素 名 > 称 为 结束 标签 (End Tag) 。 在 
开始 标签 和 结束 标签 之 间 是 内 容 (Content) 。 开 始 标签 、 内 容 和 结束 标签 共同 构成 了 一 个 
元 素 。 
在 HTML 文档 中 ， 有 些 元 素 只 有 开始 标签 ， 而 没有 对 应 的 结束 标签 ， 也 没有 内 容 。 
这 类 元 素 称 为 空 元 素 (Void Element) 。 
记事 本 (Notepad) 是 编写 HTML 文档 的 最 简单 软件 。 使 用 Web 浏览 器 可 以 打开 HIML 
文档 并 浏览 对 应 的 网 页 。 
【 例 1-1】 使 用 Notepad 软件 编写 HTML 文档 。 有 具体 步骤 如 下 : 
(1) 启动 Notepad 软件 。 在 Windows 界面 左下 角 ， 选 择 “ 开 始 ”|“ 所 有 程序 ”|“ 附 
件 ”|“ 记 事 本 ”命令 ,打开 Notepad 软件 。 
(2) 在 Notepad 软件 中 输入 以 下 HTML 代码 。 
<!-- 使 用 html 元 素 定 义 HTML 文档 --> 
<html> 
<!-- 使 用 head 元 素 定义 头 部 --> 
<head> 
<!-- 使 用 title 元 素 定义 标题 --> 
<title> 标 题 ，HTML 文档 </title> 
</head> 
<!-- 使 用 body 元 素 定义 主体 --> 
<body> 
Hello, World! 
</body> 
</html> 
在 以 上 代码 中 ， 开 始 标签 <html> 和 结束 标签 < html> 构 成 了 html 元 素 。html 元 素 定义 
了 一 个 HIML 文档 。 一 个 HIML 文档 只 有 一 个 html 元 素 ， 并 称 为 根 元 素 (Root Element)。 
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开始 标签 <head> 和 结束 标签 </head> 构 成 了 head 元 素 。 开 始 标签 <body> 和 结束 标签 
</body> 构 成 了 body 元 素 。 每 个 HTML 文档 包含 一 个 头 部 (Head) 和 一 个 主体 (Body) 。 
头 部 由 head 元 素 定 义 ， 主 体 由 body 元 素 定义 。 

开始 标签 <title> 和 结束 标签 </title> 构 成 了 title 元 素 。title 元 素 出 现在 head 元 素 的 开始 
标签 和 结束 标签 之 间 。 使 用 title 元素 可 以 定义 网 页 的 标题 。 

“Hello, World! ”是 body 元 素 的 内 容 。 

为 了 增强 可 读 性 ， 可 以 在 HTML 文档 中 添加 注释 (Comment) ， 其 格式 是 : <!-- 注 释 
内 容 -->。 

如 图 1-2 所 示 ，html、head、body 和 title 等 元 素 定 义 了 HTML 文档 的 基本 结构 
(Structure ) 。 因 此 ，html、head、body 和 title 等 元 素 也 称 为 结构 性 元 素 (Structural 
Element) 。 











1-2 ”使 用 父 元 素 和 子 元 素 定义 HTML 文档 的 树 形 层次 结构 


其 中 ，html 元 素 是 根 元 素 ， 每 个 HTML 文档 必须 且 只 能 有 一 个 html 根 元 素 。 

在 HIML 文档 中 ， 每 个 元 素 都 可 能 有 多 个 子 元 素 (Child) 和 后 代 元 素 (Descendant) 。 
html 元 素 有 两 个 子 元 素 : 一 个 是 head 元 素 ， 男 一 个 是 body 元 素 。title 元 素 既 是 head 元 
素 的 子 元 素 ， 又 是 html 元 素 的 后 代 元 素 。 通 常 ，head 元 素 和 body 元 素 还 有 其 他 的 子 
元 素 。 

在 HTML 文档 中 ， 除 html 元 素 外 ， 每 个 元 素 必须 且 只 能 有 一 个 父 元 素 (Parent)。html 
元 素 既是 head 元 素 的 唯一 父 元 素 ， 也 是 body 元 素 的 唯一 父 元 素 。title 元 素 的 唯一 父 元 素 
是 head 元 素 。 作 为 根 元 素 ，html 元 素 没有 父 元 素 。 
因此 ，HTML 文档 也 是 一 个 由 相关 的 父 元 素 和 子 元 素 构 成 的 树 形 层次 结构 。 

(3) 保存 HIML 文档 。 在 Notepad 软件 的 菜单 栏 中 选择 “文件 ”|“ 保 存 ” 命 令 ， 会 弹 
出 “另存 为 ”对 话 框 。 如 图 1-3 所 示 ， 在 “另存 为 ”对 话 框 中 首先 选 定 相 应 的 文件 夹 ， 然 
后 将 HTML 文档 命名 为 1-1.html， 最 后 单 击 “ 保 存 ” 按 钮 ， 即 可 保存 HTML 文档 。 


注意 : HTML 文档 的 扩展 名 为 .html 或 .htm。 
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图 1-3 保存 HTML 文档 


















































(4) 使 用 Web 浏览 器 (如 Intermet Explorer) 打 开 HIML 文档 1-1.html。 如 图 1-4 所 示 ， 
在 网 页 中 可 以 看 到 文字 内 容 “Hello, World!”。 


EB | 标题 : HTML 文 档 - Microsoft Internet Explorer 
文件 E) ”编辑 E) 查看 (V) 收 疗 起 ) 工具 中 帮助 (H) 
地 址 @) 简 EWeb Page\exercise\chO1\1-1.html 局 图 





Hello, World! 


恒 完 毕 是 我 的 电脑 





图 1-4 使 用 IE 浏览 器 打开 HTML 文档 

注意 : 

GD Web 浏览 器 的 主要 作用 是 读 取 HTML 文档 ， 并 以 网 页 的 形式 显示 HTML 文档 内 
容 。Web 浏览 器 不 显示 HTML 文档 中 的 标签 ， 而 是 使 用 标签 解释 HIML 文档 的 结构 及 
内 容 。 

@ 注释 中 的 文字 可 以 增加 HTML 代码 的 可 读 性 ， 但 并 不 通过 Web 浏览 器 显示 出 来 。 

@ 由 于 在 HIML 文档 头 部 使 用 title 元 素 定义 了 网 页 标题 ， 所 以 ， 在 下 浏览 器 的 顶部 
( 即 网 页 标题 中 ) 会 显示 “标题 HTML 文档 ”。 


(5) 显示 文件 的 扩展 名 。 如 果 在 “Windows 资源 管理 器 ”窗口 中 没有 显示 HIML 文档 
或 其 他 文档 的 扩展 名 ， 则 可 以 执行 如 下 操作 。 

Q 双击 桌面 上 的 “计算 机 ”图 标 ， 可 以 打开 “Windows 资源 管理 器 ”窗口 。 如 图 1-5 
所 示 ， 在 窗口 的 左上 方 选 择 “ 组 织 ”|“ 布 局 ”|“ 菜 单 栏 ”命令 ， 可 以 在 窗口 上 方 显示 菜 
单 栏 。 
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@ 在 菜单 栏 中 选择 “工具 


如 图 1-6 所 示 ， 在 该 对 话 框 中 选择 “查看 ”选项 卡 ， 然 后 在 





Y 细节 窗 格 


RKGROUP 内 存 : 4.00 GB 


Core(TM) i3-3.. 


图 1-5 在 窗口 中 显示 菜单 栏 


”| “文件 夹 选项 ” 命令， 可 以 打开 “文件 夹 选项 ”对 话 框 。 
“高 级 设置 ”列表 框 中 取消 选 


中 “隐藏 已 知 文件 类 型 的 扩展 名 ” 复 选 框 。 最 后 ， 单 击 “ 确 定 ” 按 钮 。 
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在 编 略 图 上 显示 文件 图 标 
在 文件 夹 提示 中 显示 文件 大 小 信息 
在 预览 窗 格 中 显示 预览 句柄 Ss 

















还 原 为 默认 值 四) 

















区 证 7 于 CE 





图 1-6 ”取消 选中 “隐藏 已 知 文件 类 型 的 扩展 名 ” 复 选 杠 


如 图 1-7 所 示 ， 这 时 即 可 在 “Windows 资源 管理 器 ”窗口 中 显示 HTML 文档 或 其 他 文 


档 的 扩展 名 。 
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图 1-7 显示 HTML 文档 或 其 他 文档 的 扩展 名 


(4 网 页 素材 


除 文 字 外 ， 网 页 中 还 包含 大 量 的 图 片 和 动画 。 在 网 页 中 使 用 文字 ， 能 够 向 网 页 浏览 
者 提供 明确 的 信息 。 但 如 果 网 页 中 只 有 文字 ， 则 缺少 生动 性 和 活泼 性 ， 也 会 影响 视觉 效果 
和 整个 网 页 的 美观 。 因 此 ， 在 网 页 的 制作 过 程 中 经 常 需要 插入 一 些 图 片 和 动画 。 所 以 ， 文 
字 、 图 片 和 动画 是 制作 网 页 的 最 基本 素材 。 

此 外 ， 还 可 以 为 网 页 增加 背景 音乐 。 这 样 ， 在 使 用 Web 浏览 器 打开 网 页 时 ， 即 可 同 
时 播放 背景 音乐 。 为 此 ， 需 要 为 网 页 制作 准备 音频 文件 。 


ks 静态 网 页 、 动 态 网 页 和 网 站 


网 页 (Webpage) 是 一 种 可 以 在 互联 网 中 传输 、 能 被 Web 浏览 器 认识 和 翻译 成 页 面 并 
显示 出 来 的 文件 。 根 据 访 问 和 浏览 网 页 时 所 能 获取 的 信息 及 其 特性 ， 网 页 可 以 分 为 静态 网 
页 (Static Webpage) 和 动态 网 页 (Dynamic Webpage) 两 种 。 

静态 网 页 具有 如 下 一 些 特性 : 

(1) 每 次 浏览 静态 网 页 时 ， 其 内 容 不 会 发 生变 化 ， 除 非 网 页 设计 者 修改 了 网 页 的 
内 容 。 
(2) 静态 网 页 无 法 实现 与 网 页 浏览 者 之 间 的 互动 。 信 息 流动 是 单 向 的 ， 即 信息 只 能 从 
服务 器 流向 网 页 浏览 者 。 

(3) 静态 网 页 的 HIML 文档 大 都 以 .html 或 .htm 为 文件 扩展 名 。 

动态 网 页 的 一 般 特性 如 下 : 

(1) 使 用 动态 网 页 ， 能 够 为 网 页 浏览 者 定制 内 容 。 随 不 同 客户 、 不 同时 间 ， 动 态 网 页 
会 返回 不 同 的 内 容 。 
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(2) 动态 网 页 中 的 某 些 内 容 来 自 数据 库 中 的 业务 数据 。 
(3) 动态 网 页 往往 以 .cgi、.asp、.php 和 .jsp 等 为 文件 扩展 名 。 


出 现 一 些 动画 (Animation ) ， 如 交替 切换 的 图 片 、 缩 放 自如 的 文 
面 变化 的 视觉 效果 ， 与 动态 网 页 中 变化 的 内 容 是 不 同 的 概念 。 


网 站 (Website) 又 称 站 点 ， 由 存储 在 服务 器 上 的 一 系列 相关 文件 组 成 。 这 些 文件 既 可 
以 是 相关 的 网 页 、 各 种 形式 的 文档 ， 也 可 以 是 数据 库 、 数 据 库 管理 系统 以 及 处 理 数据 的 
程序 。 

在 一 个 网 站 中 ， 通 常 寻 有 静态 网 页 ， 也 有 动态 网 页 。 

在 网 页 中 使 用 超 链接 (Hyperlink) ， 既 可 以 将 当前 网 页 与 其 他 相关 网 页 链接 在 一 起 ， 
又 可 以 指向 互联 网 中 的 特定 文档 ， 例 如 Word 文档 、PPT 幻灯 片 文档 、 压 缩 文件 或 多 媒体 
严 忻 。 

此 外 ， 通 过 动态 网 页 ， 还 可 以 访问 存储 在 服务 器 数据 库 中 的 数据 。 


超 文 本 标记 语言 、 超 文本 传送 协议 和 统一 资源 标识 符 构 成 了 万 维 网 的 核心 。 

万 维 网 联盟 通过 制定 WWW 技术 规范 和 标准 推动 了 万 维 网 的 发 展 。 

常见 的 Web 浏览 器 软件 有 微软 Intemet Explorer、Mozilla Firefox 和 谷歌 Chrome。 

网 页 主要 是 使 用 超 文本 标记 语言 编写 的 。 因 此 ， 网 页 又 称 HTML 文档 。 

HTML 文档 至 少 包含 html、head、body 和 title 四 个 元 素 ， 这 四 个 元 素 构成 了 HIML 
文档 的 基本 结构 。 在 HTML 文档 中 ，html 元 素 是 唯一 的 根 元 素 ， 并 包含 head 和 body 两 个 
元 素 ，title 元 素 又 是 head 元 素 的 子 元 素 。 

文字 、 图 片 和 动画 是 制作 网 页 的 基本 素材 。 


1. 访问 前 程 无 忧 (www.51job.com) 或 中 华 英才 网 (www.chinahr.com) 等 招聘 网 站 ， 
输入 关键 词 “ 网 页 设计 ”或 “前 端 开发 ”， 了 人 解 相 关 职 位 的 任职 要 求 ， 需 要 掌握 哪些 关键 
知识 、 主 流 技 术 或 基本 技能 ? 

2. 静态 网 页 和 动态 网 页 有 哪些 区 别 ? 

3. 阅读 以 下 HIML 代码 ， 找 出 其 中 的 HIML 元 素 并 分 析 相 关 元 素 的 父子 关系 ， 然 后 
参照 图 1-2 画 出 由 相关 的 父 元 素 和 子 元 素 构成 的 树 形 层次 结构 图 。 

<html> 

<head><title></title></head> 
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<body> 
<p><em> 互 联网 (Internet) </em>， 又 称 <strong> 因 特 网 </strong>， 意 为 “互相 连接 

在 一 起 的 计算 机 网 络 ”。 在 互联 网 中 利用 专门 的 技术 和 协议 (例如 TCP/IP 和 FTP)， 能 够 将 全 球 的 计算 
机 连接 在 一 起 ， 从 而 实现 信息 资源 共享 和 信息 交换 。 而 万 维 网 (World Wide Web，WWW) 则 建立 在 互 
联网 基础 之 上 。</p> 
<p> 万 维 网 的 核心 包括 三 个 部 分 。 <br>1. 超 文本 标记 语言 (HyperText Markup Language， 
HTML)， 其 主要 作用 是 定义 HTML 文档 ( 即 网 页 ) 的 内 容 和 结构 。 对 于 信息 资源 的 创建 者 和 提供 者 而 言 ， 
使 用 网 页 ， 能 够 将 互联 网 中 的 信息 资源 以 结构 化 和 可 视 化 的 形式 进行 有 效 组 织 。 而 在 信息 资源 的 需求 方 ， 
使 用 Web 浏览 器 (Web Browser) 打开 网 页 ， 能 够 轻松 识别 和 访问 互联 网 中 的 信息 资源 。<br>2. 超 文 
本 传送 协议 (HyperText Transfer Protocol，HTTP)， 负 责 Web 浏览 器 和 服务 器 之 间 的 信息 交换 。 
<br>3. 统一 资源 标识 符 (Uniform Resource Identifier，URI)。URI 是 用 于 标识 互联 网 中 信息 
资源 的 字符 串 。URI 可 被 视 为 统一 资源 名 称 (Uniform Resource Name，URN)、 统 一 资源 定位 符 
(Uniform Resource Locator，URL) 或 两 者 兼备 。URN 如 同一 个 人 的 姓名 ， 而 URL 则 如 同一 个 人 
的 住址 。 如 果 说 ，URN 是 对 互联 网 中 某 一 信息 资源 的 命名 ， 那 么 ，URL 则 定义 信息 资源 在 互联 网 中 的 位 
置 。 因 此 ，URL 能 够 提供 在 互联 网 中 查找 该 信息 资源 的 路 径 。</p> 

</body> 

</html> 








使 用 Fireworks 制作 图 片 | 


Fireworks 是 一 款 较为 流行 的 网 页 图 片 设计 软件 ， 它 大 大 降低 了 网 页 图 片 的 制作 难度 。 
无 论 是 专业 设计 人 员 还 是 业余 爱好 者 ， 使 用 Fireworks 都 能 轻松 地 设计 精美 图 片 ， 还 可 以 
制作 GIF 动画 。 借 助 Fireworks， 可 以 在 直观 、 可 定制 的 环境 中 创建 和 优化 用 于 网 页 的 图 片 
并 对 图 片 进行 精确 控制 ， 还 能 在 最 佳 图 像 品 质 和 最 小 压缩 大 小 之 间 达 到 平衡 。 


en Fireworks 软件 的 工作 界面 


熟悉 Fireworks 软件 的 工作 界面 及 其 组 成 部 分 ， 可 以 提高 使 用 Fireworks 制作 图 片 的 工 
作 效 率 。 如 图 2-1 所 示 ，Fireworks 软件 的 工作 界面 主要 包括 以 下 几 个 部 分 。 
舞台 画布 
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图 2-1 Fireworks 软件 的 工作 界面 
1. 菜单 栏 


菜单 栏 位 于 Fireworks 窗口 的 上 方 ， 包 括 “ 文 件 " “编辑 "“ 视 图 ” “选择” “修改”“ 广 
本 ”“ 命 令 "“ 滤 镜 ”“ 窗 口 ”和 “帮助 ”菜单 。 每 个 菜单 又 包含 一 组 功能 相关 的 命令 。 
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选择 “窗口 ”菜单 中 的 命令 ， 可 以 显示 或 隐藏 相应 的 面板 。 例 如 ， 在 菜单 中 选择 “ 窗 
口 ?|“ 对 齐 ” 命 令 ， 可 以 显示 “对 齐 ” 面板， 再 次 选择 “窗口 ” |“ 对齐 ”命令 ， 将 隐藏 “对 
齐 ” 面 板 。 

2. 舞台 

舞台 位 于 Fireworks 窗口 的 中 央 ， 占 据 了 整个 Fireworks 窗口 的 大 半 部 分 。 

3. 画布 

画布 位 于 舞台 的 中 间 ， 在 画布 中 可 以 添加 所 需 的 图 像 元 素 。 画 布 之 外 的 图 像 元 素 在 
图 片 浏览 器 中 将 无 法 显示 。 

4.“ 工 具 ” 面 板 

“工具 ”面板 位 于 Fireworks 窗口 的 左边 ， 由 “选择 ”“ 位 图 ”“ 矢 量 ”“Web” 和 “颜色 ” 
等 区 域 组 成 。 使 用 “工具 ”面板 中 的 相应 工具 ， 可 以 将 所 需 的 图 像 元 素 插入 到 画布 中 。 

5.“ 属 性 ”面板 

“属性 ”面板 位 于 Fireworks 窗口 的 下 方 ， 用 来 设置 画布 中 图 像 元 素 的 相关 属性 。 





&2 制作 网 站 标题 


网 站 标题 是 许多 网 页 都 有 的 内 容 。 有 时 候 ， 网 站 标题 可 以 加 深 访 问 者 对 网 站 的 
印象 。 

【 例 2-1】 制作 网 站 的 文字 标题 。 制 作 步骤 如 下 : 

(1) 创建 新 画布 。 进 入 Fireworks 后 ， 在 菜单 栏 中 选择 “文件 ”|“ 新 建 ” 命 令 。 如 
图 2-2 所 示 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 将 画布 的 宽度 和 高 度 分 别 设置 为 800 像素 和 
30 像素 ， 并 设置 画布 颜色 。 然 后 单 击 “确定 ”按钮 ， 即 可 在 舞台 中 创建 新 画布 。 
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图 2-2 创建 新 画布 
(2) 添加 文本 。 在 “工具 ”面板 的 “矢量 ”区 域 中 选择 “文本 ”工具 ， 然 后 在 画布 中 
插入 一 个 “文本 ”对 象 ， 最 后 在 “文本 ”对 象 的 编辑 区 中 输入 “基于 Web 标准 的 网 页 设计 
原理 与 制作 ”。 
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(3) 设置 文本 的 属性 。 如 图 2-3 所 示 ， 在 Fireworks 窗口 下 方 的 “属性 ”面板 中 将 文本 
的 宽 、 高 、X 和 YY 等 属性 分 别 设置 为 S00、26、150 和 2， 可 以 使 文本 位 于 画布 的 中 央 位 
置 。 此 外 ， 在 “属性 ”面板 中 还 可 以 设置 文本 的 字体 、 大 小 和 颜色 
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2-3 设置 文本 的 属性 


(4) 保存 ,png 文件。 在 菜单 栏 中 选择 “文件 ” |“ 保存 ”命令 ， 在 弹出 的 “另存 为 ”对 
话 框 中 选 定 相应 的 文件 夹 ， 将 文件 命名 为 2-1.png。 然 后 单 击 “ 保 存 ” 按钮 ， 即 可 将 图 像 设 
计 结 果 保 存在 .png 格式 的 文件 中 。 

(5) 设 置 导出 文件 的 .gif 格式 。 在 Fireworks 窗口 中 单 击 舞 台 或 画布 ， 确 定 在 Fireworks 
窗口 下 方 显示 画布 的 “属性 ”面板 。 如 图 2-4 所 示 ， 在 “属性 ”面板 的 “默认 导出 选项 ” 
下 拉 列 表 框 中 确认 或 选择 “GIF 网 页 216” 选 项 ， 即 可 设置 导出 文件 的 .gif 格式。 
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图 2-4 设置 导出 文件 的 .gif 格式 


(6) 生成 .gif 文件 。 在 菜单 栏 中 选择 “文件 ”|“ 导 出 ”命令 ， 在 弹出 的 “导出 ”对 话 
框 中 单 击 “ 导 出 ”按钮 ， 即 可 根据 .png 文件 生成 同名 的 .gif 格式 的 文件 。 


注意 : 

GD 与 Fireworks 软件 有 关 的 图 像 及 文件 格式 有 PNG、GIF 和 JPEG 三 种 。 

@ 便携 式 网 络 图 像 (Portable Network Graphics，PNG ) 和 图 像 交换 格式 ( Graphics 
Interchange Format，GIF ) 都 是 采用 无 损 压 缩 技术 的 图 像 格式 。 但 比较 .png 文件 和 .gif 文件 
的 大 小 ， 可 以 发 现 .gif 文件 占用 更 少 的 存储 空间 。 因 此 ， 在 网 络 中 传输 .gif 文件 所 需 的 时 间 
开销 更 小 ， 能 够 使 网 站 访问 者 体会 到 较 快 的 浏览 速度 ， 但 .gif 文件 不 能 处 理 和 存储 真 彩 的 
图 像 。 

@ 联合 图 像 专家 小 组 ( Joint Photographic Experts Group，JPEG ) 是 一 种 采用 失真 压缩 
技术 的 图 像 格式 ， 但 能 够 处 理 和 存储 真 彩 的 图 像 。 

图 使 用 Fireworks， 可 以 对 .png 文件 中 的 图 像 进行 修改 和 重新 加 工 ， 还 能 根据 .png 文 
件 导 出 并 生成 .gif 格式 和 .jpeg 格式 的 文件 。 

加 GIF 格式 的 图 像 文件 的 扩展 名 为 .gif，JPEG 格式 的 图 像 文件 的 扩展 名 为 .jpg 
或 .jpeg。 
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3 制作 导航 栏 按钮 图 片 





导航 栏 是 网 页 的 重要 组 成 部 分 ， 通 常 由 一 组 具有 按钮 功能 的 图 片 组 成 。 单 击 导航 栏 
中 的 按钮 图 片 ， 可 以 打开 新 的 网 页 。 

【 例 2-2】 制作 “课程 简介 ”按钮 图 片 。 制 作 步 骤 如 下 : 

(1) 创建 新 画布 。 进 入 Fireworks 后 ， 在 菜单 栏 中 选择 “文件 ” |“ 新建 ”命令 。 在 弹 
出 的 “新 建文 档 ” 对 话 框 中 将 画布 的 宽度 和 高 度 分 别 设置 为 200 像素 和 20 像素 。 然 后 单 击 
“确定 ”按钮 ， 即 可 在 舞台 中 创建 新 画布 。 

(2) 添加 和 矩形。 在 “工具 ”面板 的 “矢量 ”区 域 中 选择 “和 矩形” 工具， 然后 在 画布 中 
插入 一 个 “和 拢 形 ” 对 象 。 如 图 2-5 所 示 ， 以 画布 的 宽度 和 高 度 为 标准 ， 在 “属性 ”面板 中 
设置 “矩形 ”的 宽度 和 高 度 ， 并 将 “矩形 ”的 和 立 均 设置 为 0， 这 样 可 以 使 “矩形 ”的 
大 小 和 位 置 与 画布 完全 吻合 。 最 后 设置 矩形 的 填充 类 别 。 


















































图 2-5 设置 “矩形 ”的 属性 


(3) 添加 文本 。 在 “工具 ”面板 的 “矢量 ”区 域 中 选择 “文本 ”工具 ， 然 后 在 画布 中 
插入 一 个 “文本 ”对 象 ， 并 在 其 中 输入 文本 “课程 简介 ”。 如 图 2-6 所 示 ， 参 照 画 布 的 宽 
度 和 高 度 ， 在 “属性 ”面板 中 将 “文本 ”的 宽度 和 高 度 分 别 设置 为 160 和 16， 再 将 “文本 ” 
的 和 和 了 分 别 设置 为 20 和 2， 这 样 可 以 使 “文本 ”的 中 心 与 画布 的 中 心 完全 一 致 。 最 后 
设置 文本 的 颜色 。 








































































































图 2-6 设置 “文本 ”的 属性 


(4) 保存 .png 文件 。 将 图 像 设 计 结 果 保 存在 png 格式 的 文件 中 ， 并 将 文件 命名 为 
2-2.png。 

(5) 生成 .8 这 文件 。 在 菜单 栏 中 选择 “文件 ” |“ 导出” 命令， 根据.png 文件 生成 同名 
的 .gif 文件 。 
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&4 将 文本 附加 到 路 径 


在 Fireworks 的 “工具 ”面板 中 ， 使 用 “矢量 ”区 域 中 的 工具 可 以 绘制 直线 、 圆 、 椭 
圆 、 正 方形 和 和 矩形 等 撩 量 图 形 ， 并 且 这 些 图 形 是 以 路 径 定义 形状 的 计算 机 图 形 。 此 外 ， 将 
文本 附加 到 矢量 图 形 的 路 径 上 ， 还 可 以 达到 沿 特定 路 径 排列 文字 的 特殊 效果 。 

【 例 2-3】 环绕 文字 效果 。 制 作 步 骤 如 下 : 

(1) 创建 新 画布 。 进 入 Fireworks 后 ， 在 菜单 栏 中 选择 “文件 ” |“ 新建 ”命令 。 在 弹 
出 的 “新 建文 档 ” 对 话 框 中 将 画布 的 宽度 和 高 度 分 别 设置 为 300 像素 和 300 像素 ， 并 将 画 
布 颜色 设置 为 白色 。 然 后 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 在 舞台 中 创建 新 画布 。 在 菜单 栏 中 选 
择 “ 视 图 ”|“ 缩 放 比 率 ” 命 令 ， 放 大 画布 的 尺寸 。 

(2) 绘制 圆 形 。 在 “工具 ”面板 的 “矢量 ”区 域 中 选择 “椭圆 ”工具 ， 在 画布 中 央 绘 
制 一 个 直径 为 160 像素 的 圆 形 ， 将 其 “填充 类 别 ” 设 置 为 无 ， 将 其 “ 描 边 种 类 ”笔尖 大 小 ” 
和 “颜色 ”分 别 设置 为 实 线 、1 像素 和 黑色 。 

(3) 切割 圆 形 路 径 。 确 认 已 选中 圆 形 路 径 ， 和 否则 在 “工具 ”面板 的 “选择 ”区 域 中 选 
择 “ 指 针 ” 工 具 ， 然 后 再 单 击 圆 形 。 在 “工具 ”面板 的 “矢量 ” 区域 中 选择 “刀子 ”工具 。 
然后 ， 绘 制 一 条 通过 圆 形 路 径 左 右 两 个 节点 的 直线 ， 即 可 将 整个 圆 形 路 径 切 割 为 上 、 下 两 
个 半圆 形 路 径 。 

(4) 在 画布 中 添加 文本 。 在 “工具 ”面板 的 “矢量 ”区 域 中 选择 “文本 ”工具 ， 然 后 
在 画布 中 输入 文本 wwwtup.com.cn， 并 将 文本 的 字体 、 大 小 、 颜 色 分 别 设置 为 Arial 
Black、25 磅 、 红 色 。 

(5) 将 文本 附加 到 上 半圆 形 路 径 。 在 “工具 ”面板 的 “选择 ”区 域 中 选择 “部 分 选 定 ” 
工具 ， 然 后 按 住 鼠标 左 键 , 并 移动 鼠标 在 画布 中 选择 一 个 包括 文本 www.tup.com.cn 和 上 半 
圆 形 路 径 的 矩形 区 域 ， 即 可 同时 选中 文本 和 上 半圆 形 路 径 。 在 菜单 栏 中 选择 “文本 ”|“ 附 
加 到 路 径 ” 命 令 ， 即 可 将 文本 www.tup.com.cn 附加 到 上 半圆 形 路 径 。 

(6) 沿路 径 均匀 排列 文本 。 确 认 已 选中 文本 www.tup.com.cn， 然 后 在 菜单 栏 中 选择 
“文本 ”|“ 对 齐 ”|“ 两 端 对 齐 ” 命 令 ， 即 可 将 文本 沿 上 半圆 形 路 径 均 匀 排 列 。 

(7) 将 文本 附加 到 下 半圆 形 路 径 。 按 照 步骤 (4) 一 〈6) 的 方法 ， 将 文本 “清华 大 学 
出 版 社 ” 附 加 到 下 半圆 形 路 径 ， 并 沿路 径 均匀 排列 文本 。 

(8) 设置 文本 样式 。 确 认 选 中 文本 “清华 大 学 出 版 社 ”， 将 其 字体 、 大 小 、 颜 色 分 别 
设置 为 华文 彩云 、30 磅 、 红 色 。 

(9) 翻转 文本 。 在 菜单 栏 中 选择 “文本 ”| 倒转 方向 ”命令 ， 可 以 将 文本 沿路 径 翻转 。 

(10) 下 沉 文 本 。 在 菜单 栏 中 选择 “文本 ”|“ 编 辑 器 ”命令 ， 会 弹出 “文本 编辑 器 ” 
对 话 框 。 如 图 2-7 所 示 ， 在 对 话 框 中 将 “基线 调整 ”设置 为 -10， 可 以 使 文本 下 沉 。 

也 可 以 选中 全 部 文本 ， 然 后 在 “属性 ”面板 中 设置 “基线 调整 ”。 

至 此 ， 完 成 了 最 终 的 环绕 文字 效果 。 

(11) 保存 .png 文件 。 将 图 像 设 计 结果 保存 在 .png 格式 的 文件 中 ， 并 将 文件 命名 为 
2-3.png。 
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图 2-7 ”环绕 文字 的 最 终 效果 


(12) 生成 .gif 文件 。 在 菜单 栏 中 选择 “文件 ”|“ 导 出 ”命令 ,根据 .png 文件 生成 同名 
的 .g 站 文件 。 


Ss 制作 图 片 交替 的 GIF 动画 




















在 浏览 网 页 时 ， 经 常 遇 到 在 同一 区 域 中 几 张 图 片 交 替 切 换 和 显示 的 情况 。 使 用 
Fireworks 制作 GIF 动画 图 片 ， 可 以 达到 这 种 视觉 效果 。 

【 例 2-4】 制作 图 片 交 奉 的 GIF 动画 。 制 作 步 骤 如 下 : 

(1) 创建 新 画布 。 进 入 Fireworks 后 ， 在 菜单 栏 中 选择 “文件 ”|“ 新 建 ” 命 令 。 在 弹 
出 的 “新 建文 档 ” 对 话 框 中 将 画布 的 宽度 和 高 度 分 别 设置 为 400 像素 和 100 像素 ， 并 将 画 
布 颜色 设置 为 白色 。 然 后 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 在 舞台 中 创建 新 画布 。 

(2) 准备 素材 。 在 菜单 栏 中 选择 “帮助 ”|“ 关 于 Fireworks” 命 令 ， 显 示 Fireworks 标 

志 图 片 。 按 下 键盘 右上 角 的 屏幕 打印 键 (PrintScreen 键 或 prtSc 键 )， 即 可 将 包含 Fireworks 
标志 :图片 的 整个 屏幕 图 像 复 制 到 Windows 剪贴 板 中 。 

在 Windows 界面 左下 角 ， 选 择 “ 开 始 ”|“ 所 有 程序 ”|“ 附 件 ”|“ 画 图 ”命令 ， 打 开 
“画图 ”软件 。 按 CtrltV 组 合 键 ， 可 以 从 Windows 剪贴 板 中 粘贴 包含 Fireworks 标志 图 片 
的 屏幕 图 像 。 如 图 2-8 所 示 ， 在 “画图 ”软件 上 方 选择 “选择 ”|“ 和 拖 形 选择 ”命令 ， 按 住 
鼠标 左 键 并 移动 鼠标 ， 选 择 一 个 包含 Fireworks 标志 图 片 的 区 域 ， 然 后 释放 鼠标 左 键 。 按 
Ctrl+C 组 合 键 ， 即 可 将 Fireworks 标志 图 片 复 制 到 Windows 剪贴 板 中 。 
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2-8 使 用 “画图 ”软件 准备 素材 
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(3) 在 画布 中 添加 Fireworks 标志 图 片 。 切 换 回 Fireworks 软件 ， 然 后 按 CtrltV 组 合 
键 ， 从 Windows 剪贴 板 中 粘贴 Fireworks 标志 图 片 。 

(4) 将 Fireworks 标志 图 片 与 画布 吻合 。 在 菜单 栏 中 选择 “窗口 ” |“ 对 齐 ” 命 令 ， 打 
开 “ 对 齐 ” 面 板 。 如 图 2-9 所 示 ， 在 “对 齐 ” 面 板 中 依次 选择 “到 画布 2“ 匹 配 宽度 ”““ 匹 
配 高 度 ”“ 水 平 居 中 ”和 “垂直 居中 ”， 即 可 将 Fireworks 标志 图 片 的 大 小 和 位 置 与 画布 完 
全 吻合 。 

(5) 设置 帧 延 时 。 在 菜单 栏 中 选择 “窗口 ” |“ 帧 ”命令 ， 会 在 Fireworks 窗口 的 右边 
展开 并 显示 “ 帧 ”面板 。 如 图 2-10 所 示 ， 双 击 在 第 1 帧 所 在 行 右 边 的 单元 格 ， 将 该 帧 的 延 
时 设置 为 100/100 秒 ( 即 1 秒 ) ， 表 示 该 帧 中 的 画面 将 持续 显示 1 秒 钟 ， 并 确认 选中 “ 导 
出 时 包括 ” 复 选 框 。 
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图 2-9 使 用 “对 齐 ” 面 板 将 Fireworks 图 2-10 设置 帧 延 时 
标志 图 片 与 画布 吻合 


(6) 制作 其 他 两 帧 画面 。 在 “ 帧 ”面板 右 下 角 ， 单 击 “新建 / 重 制 帧 ”按钮 2 次 ， 增 加 
第 2 帧 和 第 3 帧 。 然 后 ， 采 用 步骤 (2) 一 (5) 中 的 方法 ， 在 第 2 帧 和 第 3 帧 中 分 别 添加 
Dreamweaver 标志 图 片 和 Flash 标志 图 片 。 

(7) 测试 GIF 动画 。 如 图 2-11 所 示 ， 在 舞台 下 方 单 击 “播放 /停止 ”按钮 ， 即 可 测试 
GIF 动画 。 在 该 GIF 动画 中 ， 将 依次 显示 第 1 帧 中 的 Fireworks 标志 、 第 2 帧 中 的 
Dreamweaver 标志 和 第 3 帧 中 的 Flash 标志 画面 ， 且 每 个 标志 画面 延 时 1 秒 钟 。 


























2-11 测试 GIF 动画 


第 2 章 使 用 Fireworks 制作 图 片 


(8) 保存 .png 文件 。 将 GIF 动画 的 设计 结果 保存 在 .png 格式 的 文件 中 ， 并 将 文件 命名 
为 2-4.png。 

(9) 生成 GIF 动画 。 如 图 2-12 所 示 ， 在 Fireworks 窗口 下 方 的 “属性 ”面板 中 ， 选 择 
并 确认 “动画 GIF 接近 网 页 128 色 ”。 








CC | 动画 GIF 接近 网 页 128 色 





图 2-12 设置 导出 选项 


在 菜单 栏 中 选择 “文件 ”| “导出” 命令， 将 根据 .png 文件 导出 并 生成 GIF 动画 文件 ， 
并 将 GIF 动画 保存 在 名 为 2-4.gif 的 .gif 文件 中 。 

(10) 查看 GIF 动画 。 在 Windows 资源 管理 器 中 用 正 浏览 器 打开 文件 2-4.gif， 即 可 查看 
GIF 动画 效果 。 


注意 : 

@ 在 第 (9) 步 中 ， 必 须 选择 并 确认 “动画 GIF 接近 网 页 128 色 ”， 否 则 在 了 浏览 
器 中 将 看 不 到 GIF 动画 效果 。 

@ 在 第 (10) 步 中 ， 如 果 使 用 Fireworks 打开 GIF 动画 文件 2-4.gif， 只 能 修改 该 GIF 
动画 文件 ， 而 不 能 查看 该 GIF 动画 文件 的 动画 效果 。 





&e 制作 滚动 字幕 效果 的 GIF 动画 


滚动 字幕 是 在 电视 剧 结尾 经 常 看 到 的 一 种 动画 效果 。 在 Fireworks 中 使 用 蒙 版 ， 可 以 
制作 能 够 产生 滚动 字幕 效果 的 GIF 动画 。 

【 例 2-S】 使 用 蒙 版 制作 滚动 字幕 效果 的 GIF 动画 。 制 作 步骤 如 下 : 

(1) 创建 新 画布 。 进 入 Fireworks 后 ， 在 菜单 栏 中 选择 “文件 ” |“ 新建 ”命令 。 在 弹 
出 的 “新 建文 档 ” 对 话 框 中 将 画布 的 宽度 和 高 度 分 别 设置 为 800 像素 和 100 像素 ， 并 将 画 
布 颜色 设置 为 黑色 。 然 后 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 在 舞台 中 创建 新 画布 。 

(2) 制作 文本 内 容 的 图 形 元 件 。 

中 设置 文本 属性 。 在 “工具 ”面板 的 “矢量 ”区 域 中 选择 “文本 ”工具 。 如 图 2-13 所 
示 ， 在 “属性 ”面板 中 将 文本 的 字体 、 大 小 、 颜 色 分 别 设置 为 Arial Black、60 像素 、 绿 色 。 
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2-13 ”设置 文本 属性 


MA 


18 。” Web 标准 网 页 设计 原理 与 前 端 开发 技术 
IN 


@ 在 画布 中 添加 文本 。 在 画布 中 添加 并 输入 文本 “使 用 蒙 版 制作 的 滚动 字幕 ”。 

@ 将 文本 转换 为 图 形 元 件 。 在 菜单 栏 中 选择 “修改 "| 元件 ”| “转换 为 元 件 ” 命 令 ， 
会 弹出 “元 件 属性 ”对 话 框 。 如 图 2-14 所 示 ， 在 “名 
称 ”文本 框 中 输入 “文本 图 形 元 件 ”， 然 后 单 击 “ 确 



































定 ” 按 钮 ， 即 可 将 画布 中 的 文本 “使 用 蒙 版 制作 的 深 i 
动 字幕 ”转换 为 一 个 图 形 元 件 ， 同 时 该 图 形 元 件 被 添 Oma 








加 到 “ 库 ” 面 板 中 。 

@ 使 图 形 元 件 在 画布 中 居中 。 在 “属性 ”面板 图 2-14 ”将 文本 转换 为 图 形 元 件 
中 ， 将 “文本 图 形 元 件 ” 的 宽 、 高 、X 和 YY 分别 设置 
为 650、60、75 和 20， 则 可 以 使 “文本 图 形 元 件 ” 居 于 画布 的 正中 央 。 

(3) 制作 第 1 个 元 件 和 矢量 蒙 版 组 合 。 

@ 在 图 形 元 件 上 方 绘制 矩形 。 在 “工具 ”面板 的 “矢量 ”区 域 中 选择 “和 矩形 ”工具 ， 
然后 在 画布 中 添加 一 个 与 “文本 图 形 元 件 ” 大 小 相同 的 矩形 ， 并 使 “矩形 ”恰好 覆盖 “ 文 
本 图 形 元 件 ”。 如 图 2-15 所 示 ， 在 “属性 ”面板 中 将 矩形 的 填充 类 别 和 颜色 依次 设置 为 “ 渐 
变 | 线 性 ”和 “黑色 -白色 -黑色 ”。 

未 命名 -1. pne* 雪 ,ri 对 于 553: 和 ni 
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图 2-15 设置 矩形 属性 








@ 制作 蒙 版 。 如 图 2-15 所 示 ， 在 “ 层 ” 面 板 中 单 击 “ 层 1”， 可 以 同时 选中 “和 矩形 ” 
和 “图 形 元 件 ”。 在 菜单 栏 中 选择 “修改 ”|“ 蒙 版 ”| “组合 为 蒙 版 ”命令 ， 可 以 基于 “和 拢 
形 ” 生 成 一 个 “矢量 蒙 版 ”， 并 将 该 “矩形 矢量 蒙 版 ”和 “文本 图 形 元 件 ” 组 合并 链接 在 
一 起 。 

@ 重新 命名 层 。 将 “ 层 ” 面 板 中 的 “ 层 1” 改 名 为 “ 蒙 版 屋 ”。 此 时 ，“ 层 ”面板 如 
图 2-16 所 示 。 在 蒙 版 层 中 包含 了 第 1 个 元 件 和 矢量 蒙 版 组 合 。 


























第 2 章 使 用 Fireworks 制作 图 片 2 
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2-16 ”矢量 蒙 版 和 元 件 组 合 


@ 在 元 件 和 矢量 蒙 版 组 合 中 移动 “文本 图 形 元 件 ”。 单 击 元 件 和 矢量 蒙 版 之 间 的 铁 
链 图 标 ， 可 以 将 “文本 图 形 元 件 ” 和 “和 矩形 矢量 蒙 版 ”分 开 。 单 击 左边 的 “文本 图 形 元 件 ”， 
使 用 右 方 向 键 〈 一 ) 在 画布 中 将 “文本 图 形 元 件 ”移动 到 “矩形 矢量 蒙 版 ”的 右边 ， 直 至 
使 “文本 图 形 元 件 ” 中 的 文本 看 不 见 。 在 “属性 ”面板 中 将 “文本 图 形 元 件 ”的 义 设置 为 
750， 也 可 以 直接 将 “文本 图 形 元 件 ” 移 动 到 “矩形 矢量 蒙 版 ”的 右边 。 

(4) 制作 第 2 个 元 件 和 矢量 蒙 版 组 合 。 在 “ 层 ” 面 板 中 单 击 第 1 个 元 件 和 矢量 蒙 版 组 
合 ， 然 后 依次 使 用 Ctrl+C 组 合 键 和 CtrltV 组 合 键 ， 可 以 复制 并 生成 第 2 个 元 件 和 矢量 蒙 
版 组 合 。 在 第 2 个 元 件 和 矢量 蒙 版 组 合 中 ， 单 击 左边 的 “文本 图 形 元 件 ”， 使 用 左 方向 键 
(一 ) 在 画布 中 将 “文本 图 形 元 件 ” 移 动 到 “矩形 矢量 蒙 版 ”的 左边 ， 直 至 使 “文本 图 形 元 
件 ” 中 的 文本 看 不 见 。 在 “属性 ”面板 中 将 “文本 图 形 元 件 ” 的 和 设置 为 -600， 也 可 以 直 
接 将 “文本 图 形 元 件 ” 移 动 到 “矩形 矢量 蒙 版 ”的 左边 。 

(5) 制作 补 间 动 画 。 如 图 2-17 所 示 ， 在 “ 层 ” 面 板 中 ， 分 别 单 击 两 个 元 件 和 矢量 蒙 版 
组 合 中 的 铁 链 图 标 ， 分 别 将 两 个 组 合 中 的 “文本 图 形 元 件 ” 和 “矩形 矢量 蒙 版 ”重新 链接 

如 图 2-18 所 示 ， 在 “ 帧 ”面板 中 将 “ 帧 延 时 ”设置 为 30/100 秒 。 



























































图 2-17 重新 链接 “元 件 ” 和 “矢量 蒙 版 ” 图 2-18 设置 帧 延 时 


在 “ 层 ”面板 中 单 击 “ 蒙 版 层 ”， 可 以 同时 选中 两 个 gpg 
元 件 和 矢量 蒙 版 组 合 。 然 后 ， 在 菜单 栏 中 选择 “修改 "|“ 元 |。 sa 
件 ”|“ 补 闻 实 例 ” 命 令 ， 会 弹出 “ 补 间 实 例 ” 对 话 框 。 如 
图 2-19 所 示 ， 在 “ 步 又 ”文本 框 中 输入 25， 并 选中 “分 散 
到 帧 ” 复 选 框 。 然 后 ， 单 击 “ 确 定 ”按钮 ， 即 可 制作 补 间 
动画 。 

















2-19 设置 补 间 动 画 属性 
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此 时 ， 在 “ 帧 ”面板 中 可 以 看 到 共有 27 帧 。 其 中 ， 第 2 帧 至 第 26 帧 ( 共 25 帧 ) 是 
根据 “ 蒙 版 层 ” 中 的 两 个 元 件 和 矢量 蒙 版 组 合生 成 的 。 

(6) 测试 GIF 动画 。 在 舞台 下 方 单 击 “播放 /停止 ”按钮 ， 即 可 测试 GIF 动画 文件 。 
在 该 GIF 动画 中 ， 文 本 “使 用 蒙 版 制作 的 滚动 字幕 ”在 蒙 版 下 将 从 左 向 右 滚 动 。 

(7) 保存 .png 文件 。 将 GIF 动画 的 设计 结果 保存 在 .png 格式 的 文件 中 ， 并 将 文件 命名 
为 2-5.png。 

(8) 生成 GIF 动画 。 如 图 2-20 所 示 ， 在 Fireworks 窗口 下 方 的 “属性 ”面板 中 ， 选 择 
并 确认 “动画 GIF 接近 网 页 128 色 ”。 








图 2-20 设置 导出 选项 


在 菜单 栏 中 选择 “文件 ”| “导出” 命令， 将 根据 .png 文件 导出 并 生成 GIF 动画 文件 ， 
并 将 GIF 动画 保存 在 名 为 2-5.gif 的 .gif 文件 中 。 

(9) 查看 GIF 动画 。 在 Windows 资源 管理 器 中 用 正 浏览 器 打开 文件 2-5.gif， 即 可 查看 
GIF 动画 效果 。 


E7 小结 


除 Fireworks 外 ，Photoshop、lllustrator 和 CorelDRAW 也 都 是 流行 的 图 像 处 理 和 平面 
设计 软件 。 

网 页 中 所 使 用 的 图 像 及 其 文件 格式 主要 有 GIF 和 JPEG 两 种 格式 。 

使 用 .gif 格式 的 文件 ， 可 以 同时 存储 若干 幅 静 止 图 像 进 而 生成 连续 播放 若干 幅 静 止 图 
像 的 GIF 动画 。 

在 Fireworks 软件 中 ， 还 可 以 使 用 元 件 、 蒙 版 、 补 间 等 技术 制作 GIF 动画 。 

GIF 图 像 文件 的 扩展 名 为 .gif，JPEG 图 像 文件 的 扩展 名 为 jpg 或 jpeg。 


&8' 习题 


1. 网 页 中 主要 使 用 哪 两 种 格式 的 图 像 文 件 ? 两 者 有 哪些 相似 点 和 不 同 点 ? 
2. 在 【 例 2-1】 和 【 例 2-2】 中 导出 jpeg 格式 的 图 像 文件 。 


















使 用 Flash 制作 动画 | 


Flash 是 一 款 设计 和 制作 动画 的 专业 软件 。 它 能 使 网 页 设计 人 员 充 分 发 挥 其 创新 性 和 
想象 力 ， 随 心 所 欲 地 设计 各 种 动画 标志 和 广告 条 。 使 用 Flash 软件 ， 网 页 设计 人 员 还 可 以 
制作 动感 十 足 的 动画 短片 。 





人 Flash 软件 的 工作 界面 


如 图 3-1 所 示 ，Flash 软件 的 工作 界面 主要 由 菜单 栏 、 动 画 场 景 编辑 区 、“ 时 间 轴 ” 面 
板 、“ 工 具 ” 面 板 、“ 库 ”面板 和 “属性 ”面板 组 成 。 
“时 间 轴 ”面板 


Nin Flash Professional 8 — [3-1.f]as 
视 朋 搬入 人 体 帮 人) 立 本 号 命 今世 招 制 人 窗口 和 才 动 00 菜单 栏 





“ 库 ” 面 板 























3-1 ”Fireworks 软件 的 工作 界面 


1. 菜单 栏 

菜单 栏 位 于 Flash 窗口 的 上 方 ， 包 括 文件 、 编 辑 、 视 图 、 插 入 、 修 改 、 文 本 、 命 令 、 
控制 、 窗 口 和 帮助 等 菜单 。 每 个 菜单 又 包含 一 组 功能 相关 的 命令 。 

选择 “窗口 ”菜单 中 的 命令 ， 可 以 显示 或 隐藏 “时 间 轴 ”“ 工 具 ”“ 库 ”和 “属性 ”等 
面板 。 例 如 ， 在 菜单 栏 中 选择 “窗口 ” |“ 库 ” 命 令 ， 可 以 显示 “ 库 ” 面 板 ， 再 次 选择 “ 窗 
口 ” |“ 库 ”命令 ， 则 将 隐藏 “ 库 ” 面板 。 
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2. 动画 场景 编辑 区 

动画 场景 编辑 区 位 于 Flash 窗口 的 中 央 ， 是 一 个 放置 图 形 内 容 的 矩形 区 域 ， 这 些 图 形 
内 容 包括 矢量 插图 、 文 本 框 、 按 钮 、 导 入 的 位 图 图 形 或 视频 剪辑 等 。 

3.“ 时 间 轴 ”面板 

“时 间 轴 ”面板 位 于 舞台 上 方 ， 用 于 组 织 和 控制 Flash 文档 内 容 在 一 定时 间 内 播放 的 帧 
数 和 图 层 数 。 与 胶片 一 样 ，Flash 文档 也 将 时 长 分 为 帧 。 图 层 就 像 堆 释 在 一 起 的 多 张 幻灯 
胶片 ， 每 个 图 层 都 包含 一 个 显示 在 舞台 中 的 不 同 图 像 。 

4.“ 工 具 ” 面 板 

“工具 ”面板 位 于 Flash 窗口 的 左边 ， 由 “工具 ”“ 查 看 “颜色 ”和 “选项 ”四 个 区 域 
组 成 。 使 用 “工具 ”面板 中 的 工具 可 以 绘图 、 上 色 、 选 择 和 修改 插图 ， 并 可 以 更 改 舞 台 的 
视图 。 

5.“ 库 ”面板 

“ 库 ” 面 板 位 于 Flash 窗口 的 右边 ， 是 存储 和 组 织 在 Flash 中 创建 的 各 种 元 件 的 地 方 ， 
它 还 用 于 存储 和 组 织 导 入 的 文件 ， 包 括 位 图 图 形 、 声 音 文件 和 视频 剪辑 。 

6.“ 属 性 ”面板 

“属性 ”面板 位 于 Flash 窗口 的 下 方 ， 使 用 “属性 ”面板 可 以 设置 在 舞台 或 时 间 轴 上 当 
前 选 定 项 的 属性 ， 从 而 简化 Flash 文档 的 创建 过 程 。 


€2 制作 缩放 自如 的 文字 





在 “时 间 轴 ”面板 中 ， 可 以 在 不 同 帧 中 设置 不 同 的 画面 。 这 样 ， 不 同 帧 中 的 画面 连 
续 播 放 ， 即 可 产生 动画 效果 。 

【 例 3-1】 利用 时 间 轴 制作 缩放 自如 的 文字 。 人 制作 步骤 如 下 ;: 

(1) 新 建 Flash 文档 。 进 入 Flash 后 ， 在 菜单 栏 中 选择 “文件 ” |“ 新建” 命令。 在 弹 
出 的 “新 建文 档 ” 对 话 框 中 选择 “Flash 文档 ”类 型 。 然 后 单 击 “确定 ” 按 钮 ， 即 可 新 建 
Flash 文档 ， 并 打开 动画 场景 编辑 区 。 

(2) 设置 Flash 文档 及 动画 场景 的 属性 。 在 菜单 栏 中 选择 “修改 ”|“ 文 档 ” 命 令 ， 则 
会 弹出 “文档 属性 ”对 话 框 。 如 图 3-2 所 示 ， 在 “文档 属性 ”对 话 框 中 将 动画 场景 的 “ 尺 
寸 ” 设 置 为 800px ( 宽 ) x80px (高 ) ， 设 置 动 画 场景 的 “背景 颜色 ”， 并 将 “ 帧 频 ” 设 置 
为 12fps。 

(3) 创建 图 形 元 件 。 在 菜单 栏 中 选择 “插入 ”|“ 新 建 元 件 ” 命 令 。 如 图 3-3 所 示 ， 在 
弹出 的 “创建 新 元 件 ” 对 话 框 中 输入 新 元 件 的 名 称 “欢迎 文字 ”， 并 选择 “图 形 ”类 型 。 
然后 ， 单 击 “ 确 定 ”按钮 ， 即 可 创建 一 个 图 形 元 件 ， 并 将 该 图 形 元 件 添加 到 Flash 窗口 右 
边 的 “ 库 ” 面 板 中 。 同 时 ， 在 Flash 窗口 的 中 间 打 开元 件 编辑 区 。 

(4) 添加 文本 。 在 “工具 ”面板 的 “工具 ”区 域 中 选择 “文本 工具 ”， 然 后 在 元 件 编 
辑 区 中 输入 文本 “网 页 设计 与 制作 ”。 
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图 3-2 设置 Flash 文档 及 动画 场景 的 属性 图 3-3 创建 新 元 件 





(5) 设置 文本 的 属性 。 在 “工具 ”面板 的 “工具 ”区 域 中 选择 “选择 工具 ”可 以 选中 
“网 页 设计 与 制作 ”整个 文本 串 。 如 图 3-4 所 示 ， 在 “属性 ”面板 中 设置 字体 、 字 体 大 
小 、 宽 、 高 、X 和 了 立 等 属性 ， 使 文本 位 于 元 件 编辑 区 的 正中 央 。 













nl 


加 | 可 这 性 消除 刀具 
姻 4 国 [自动 调整 宇 距 






































图 3-4 设置 文本 的 属性 


(6) 分 离 文 字 并 设置 单个 文字 的 颜色 。 在 菜单 栏 中 选择 “修改 ”| “分离 ” 命 令 ， 即 可 
将 整个 文本 串 分 离 成 单个 的 文字 。 分 别 选中 每 个 文字 ， 通 过 “属性 ”面板 设置 单个 文字 的 
颜色 。 

(7) 切换 回 动画 场景 编辑 区 。 在 Flash 窗口 上 方 有 “时 间 轴 ”面板 ， 在 该 面板 的 左上 
方 选择 “场景 1”， 可 以 从 元 件 编辑 区 切换 回 动画 场景 编辑 区 。 

(8) 在 场景 中 添加 元 件 。 从 Flash 窗口 右边 的 “ 库 ” 面 板 中 ， 将 “欢迎 文字 ”元 件 拖 
忠 到 “场景 1” 编辑 区 ， 可 以 在 场景 中 添加 元 件 。 

(9) 在 第 1 帧 中 设置 元 件 的 大 小 及 其 在 场景 中 的 位 置 。 如 图 3-5 所 示 ， 在 “属性 ” 面 
板 中 设置 宽 、 高 、X 和 站 等 属性 ， 使 元 件 位 于 动画 场景 编辑 区 的 正中 央 。 此 外 ， 还 可 以 设 
置 元 件 的 亮度 。 此 时 ， 该 元 件 及 其 画面 就 出 现在 “场景 1” 的 第 1 帧 中 。 





































































便 用 运行 时 位 图 缓存 














3-5 设置 元 件 的 大 小 及 其 在 场景 中 的 位 置 
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(10) 在 关键 帧 中 复制 元 件 及 其 画面 。 在 “时 间 轴 ”面板 中 右 击 第 20 帧 ， 在 弹出 的 快 
捷 菜单 中 选择 “插入 关键 帧 ”命令 ， 即 可 将 第 1 帧 中 的 元 件 及 其 画面 复制 到 第 20 帧 中 。 

(11) 在 第 20 帧 中 设置 元 件 的 大 小 及 其 在 场景 中 的 位 置 。 在 “属性 ”面板 中 ， 将 元 件 
的 宽 、 高 、X 和 YY 等 属性 分 别 设置 为 700、70、50 和 5。 

(12) 指定 中 间 帧 中 画面 的 生成 方式 。 在 “时 间 轴 ”面板 中 选择 第 1 帧 ， 然 后 在 “ 属 
性 ”面板 中 将 “ 补 间 ”设置 为 “动画 ”， 选 中 “缩放 ” 复 选 框 ， 并 将 “旋转 ”设置 为 “ 自 
动 ”, 如 图 3-6 所 示 。 这 样 ， 可 以 指定 从 第 1 帧 到 第 20 帧 之 间 的 每 帧 中 画面 的 生成 方式 。 









































图 3-6 “属性 ”面板 


(13) 观察 动画 效果 。 在 菜单 栏 中 选择 “控制 ”|“ 测 试 影片 ”命令 ， 可 以 观察 从 第 1 
帧 到 第 20 帧 每 帧 画面 的 连续 播放 效果 。 

(14) 保 存 Flash 文档 。 在 菜单 栏 中 选择 “文件 ”|“ 保 在 ”命令 ， 在 弹出 的 “另存 为 ” 
对 话 框 中 选 定 相应 的 文件 夹 ， 将 文档 命名 为 3-1.fla。 然 后 单 击 “ 保 存 ” 按 钮 ， 即 可 将 动画 
设计 结果 保存 在 .fla 格式 的 Flash 文档 中 。 

(15) 生成 .swf 文 件 。 在 菜单 栏 中 选择 “文件 ”|“ 发 布 ”命令 ， 即 可 根据 Flash 文档 生 
成 同名 的 .swf 文 件 。 

(16) 播放 SWF 动画 。 使 用 Macromedia Flash Player 软件 打开 文件 3-1.swf， 即 可 播放 
SWF 动画 。 

注意 : 

加 使 用 Flash， 可 以 对 .fla 文 件 中 的 动画 及 其 中 的 元 件 进行 重新 处 理 和 加 工 ， 但 不 能 对 .swf 
文件 进行 重新 处 理 和 加 工 。 此 外 ， 还 可 以 使 用 其 他 的 视频 软件 播放 .swf 文件 中 的 动画 ， 而 
且 .Swf 文 件 有 很 好 的 动画 效果 。 

@ 比较 fla 文件 和 swf 文件 的 大 小 ， 可 以 发 现 : .swf 文件 占用 更 少 的 存储 空间 。 因 此 ， 在 网 
络 中 传输 .swf 格式 的 动画 文件 所 需 的 时 间 开 销 更 小 ， 可 以 使 网 站 访问 者 体会 到 较 快 的 浏览 
速度 。 


人 3 制作 运动 渐变 的 动画 


在 开始 关键 帧 中 设置 文字 的 属性 ， 比 如 大 小 、 颜 色 和 亮度 等 ， 然 后 在 结束 关键 帧 中 
改变 这 些 属性 ， 可 以 产生 运动 渐变 的 动画 效果 。 

【 例 3-2】 制作 运动 渐变 的 动画 。 制 作 步骤 如 下 : 

(1) 新 建 Flash 文档 。 进 入 Flash 后 ， 在 菜单 栏 中 选择 “文件 ”|“ 新 建 ”命令 。 在 弹 
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出 的 “新 建文 档 ” 对 话 框 中 选择 “Flash 文档 ”类 型 。 然 后 单 击 “ 确 定 ” 按 钮 ， 即 可 新 建 
Flash 文档 ， 并 打开 动画 场景 编辑 区 。 

(2) 设置 Flash 文档 及 动画 场景 的 属性 。 在 菜单 栏 中 选择 “修改 ”|“ 文 档 ” 命 令 ， 则 
会 弹出 “文档 属性 ”对 话 框 。 如 图 3-7 所 示 ， 在 “文档 属性 ”对 话 框 中 将 动画 场景 的 “ 尺 
寸 ”设置 为 600px〈 宽 ) x200px (高 ) ， 设 置 动 画 场景 的 “背景 颜色 ”， 并 将 “ 帧 频 ” 设 
置 为 1fps。 
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图 3-7 设置 Flash 文档 及 动画 场景 的 属性 


如 图 3-8 所 示 ,， 也 可 以 通过 Flash 窗口 下 方 的 “属性 ”面板 设置 Flash 文档 及 动画 场景 
的 属性 。 
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3-8 通过 “属性 ”面板 设置 Flash 文档 及 动画 场景 的 属性 


(3) 在 动画 场景 编辑 区 输入 文本 并 设置 文本 属性 。 首 先 ， 在 “工具 ”面板 中 选择 “ 文 
本 工具 ”， 在 动画 场景 编辑 区 输入 文本 “欢迎 光临 ”。 然 后 ， 在 “工具 ”面板 中 选择 “ 选 
择 工具 ”， 可 以 选中 “欢迎 光临 ”整个 文本 串 。 如 图 3-9 所 示 ， 在 “属性 ”面板 中 将 文本 
串 的 “字体 ”“ 字 体 大 小 ”和 “颜色 ”分 别 设置 为 “楷体 ”、70 和 黑色 ， 再 通过 设置 
“ 宽 ”“ 高 ”、X 和 YY 属性 将 文本 调整 到 动画 场景 编辑 区 的 中 央 。 
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3-9 在 “属性 ”面板 上 设置 文本 属性 
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(4) 在 图 层 之 间 复 制 、 粘 贴 帧 。 在 “时 间 轴 ”面板 中 双击 “图 层 1”， 将 其 名 称 修改 
为 FLASH。 在 菜单 栏 中 选择 “插入 ”|“ 时 间 轴 ”|“ 图 层 ” 命 令 ， 可 以 新 建 “ 图 层 2”。 
右 击 FLASH 图 层 的 第 1 帧 ， 在 弹出 的 快捷 菜单 中 选择 “复制 帧 ”命令 。 然 后 ， 右 击 “ 图 
层 2” 的 第 1 帧 ， 在 弹出 的 快捷 菜单 中 选择 “粘贴 帧 ”命令 。 这 样 ， 可 以 将 FLASH 图 层 第 
1 帧 中 的 文本 “欢迎 光临 ”复制 到 “图 层 2” 的 第 1 帧 。 

(5) 将 分 离 的 文字 分 散 到 多 个 图 层 中 。 在 “图 层 2” 的 第 1 帧 中 选中 文本 “欢迎 光 
临 ”， 在 菜单 栏 中 选择 “修改 ”|“ 分 离 ” 命 令 ， 可 以 将 文本 “欢迎 光临 ” 拆 分 为 四 个 单 
独 文字 。 然 后 ， 在 菜单 栏 中 选择 “修改 ”|“ 时 间 轴 ”|“ 分 散 到 图 层 ” 命 令 ， 可 以 将 “图 
层 2” 第 1 帧 中 的 四 个 单独 文字 分 散 到 四 个 新 建 图 层 的 第 1 帧 中 。 此 时 ， 在 “时 间 轴 ” 面 
板 中 ， 图 层 分 布 如 图 3-10 所 示 。 

(6) 删除 多 余 的 图 层 。 在 上 一 步 中 ， 已 经 将 “图 层 2” 第 1 帧 中 的 四 个 单独 文字 分 散 
到 四 个 新 建 图 层 的 第 1 帧 中 。 这 样 ， 在 “图 层 2” 第 1 帧 中 不 再 有 任何 文本 。 因 此 ， 可 以 
删除 “图 层 2”。 在 “时 间 轴 ”面板 中 右 击 “图 层 2”， 在 弹出 的 快捷 菜单 中 选择 “删除 
图 层 ” 命 令 ， 即 可 删除 多 余 的 “图 层 2”。 

(7) 将 文本 转换 成 图 形 元 件 。 单 击 “ 欢 ”图 层 中 的 第 1 帧 ， 即 可 自动 选中 文本 
“ 欢 ”。 在 菜单 栏 中 选择 “修改 ”|“ 转 换 为 元 件 ” 命 令 ， 在 弹出 的 “转换 为 元 件 ” 对 话 
框 中 选中 “图 形 ” 单 选 按钮 ， 将 元 件 名 称 设 置 为 “ 欢 ”， 单 击 “ 确 定 ”按钮 ， 可 以 将 
“ 欢 ” 图 层 第 1 帧 中 的 文本 “ 欢 ” 转 换 为 图 形 元 件 。 采 用 类 似 的 操作 方法 ， 将 “ 迎 ” 
“ 光 ” 和 “ 临 ” 图 层 第 1 帧 中 的 文本 分 别 转换 成 名 称 为 “ 迎 ”“ 光 ”和 “ 临 ”的 图 形 元 
件 。 此 时 ，“ 库 ”面板 如 图 3-11 所 示 。 
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图 3-10 ”将 分 离 的 文字 分 散 到 多 个 图 层 中 图 3-11 库 面板 中 的 图 形 元 件 


(8) 在 图 层 中 拖 放 帧 。 在 “时 间 轴 ”面板 的 “ 欢 ” 图 层 中 ， 用 鼠标 左 键 选中 第 1 帧 ， 
按 住 鼠标 左 键 不 放 ， 同 时 将 鼠标 移动 到 第 3 帧 ， 然 后 释放 鼠标 左 键 ， 可 以 将 第 1 帧 拖 放 到 
第 3 帧 。 采 用 类 似 的 操作 方法 ， 将 “ 迎 ” 图 层 的 第 1 帧 拖 放 到 第 4 帧 ， 将 “ 光 ” 图 层 的 第 
1 帧 拖 放 到 第 5 帧 ， 将 “ 临 ” 图 层 的 第 1 帧 拖 放 到 第 6 帧 。 此 时 ， 在 “时 间 轴 ”面板 中 ， 
图 层 分 布 如 图 3-12 所 示 。 

(9) 在 图 层 中 插入 结束 关键 帧 。 在 “ 欢 ” 图 层 中 右 击 第 7 帧 ， 然 后 在 弹出 的 快捷 菜单 
中 选择 “插入 关键 帧 ”命令 ， 可 以 在 第 7 帧 插入 结束 关键 帧 。 采 用 类 似 的 操作 方法 ， 分 别 
在 “ 迎 ”图 层 的 第 8 帧 、“ 光 ”图 层 的 第 9 帧 和 “ 临 ” 图 层 的 第 10 帧 插入 结束 关键 帧 。 

(10) 在 开始 关键 帧 中 移动 并 放大 元 件 。 单 击 “ 欢 ”图 层 中 的 第 3 帧 ， 也 就 是 开始 关 
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键 帧 ， 再 按 左 方向 键 两 次 ， 使 元 件 “ 欢 ”向 左 移动 两 个 位 置 。 然 后 ， 在 菜单 栏 中 选择 “ 窗 
口 ” | 变形” 命令 ， 打 开 “ 变 形 ”面板 。 如 图 3-13 所 示 ， 在 “变形 ”面板 上 选中 “ 约 
束 ” 复 选 框 ， 在 “宽度 ”和 “高 度 ” 文 本 框 中 输入 150%， 可 以 将 “ 欢 ” 图 层 第 3 帧 中 的 
元 件 “ 欢 ”放大 到 原来 的 1.5 倍 。 


十 了 
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3-12 ”在 图 层 中 拖 放 帧 图 3-13 设置 “变形 ”属性 


采用 类 似 的 操作 方法 ， 分 别 在 “ 迎 ”图 层 第 4 帧 、“ 光 ”图 层 第 5 帧 和 “ 临 ” 图 层 第 
6 帧 中 向 左 移动 元 件 “ 迎 ”“ 光 ”和 “ 临 ”， 并 使 用 “变形 ”面板 将 元 件 “ 迎 ”“ 光 ”和 
“ 临 ” 放 大 到 原来 的 1.5 倍 。 

(11) 在 结束 关键 帧 中 设置 元 件 的 亮度 。 单 击 “ 欢 ”图 层 的 第 7 帧 ， 也 就 是 结束 关键 
帧 ， 单 击 元 件 “ 欢 ”。 然 后 ， 在 “属性 ”面板 的 “颜色 ”下 拉 列 表 框 中 选择 “亮度 ” 选 
项 ， 在 右 侧 的 文本 框 中 输入 100%。 采 用 类 似 的 操作 方法 ， 分 别 在 “ 迎 ” 图 层 第 8 帧 、 
“ 光 ” 图 层 第 9 帧 和 “ 临 ” 图 层 第 10 帧 中 依次 设置 元 件 “ 迎 ”“ 光 ”和 “ 临 ”的 亮度 。 

(12) 创建 补 间 动 画 。 在 “ 欢 ” 图 层 中 右 击 第 3 帧 ， 也 就 是 开始 关键 帧 ， 然 后 在 弹出 
的 快捷 菜单 中 选择 “创建 补 问 动画” 命令， 即 可 在 第 3 帧 和 第 7 帧 之 间 创 建 补 间 动 画 。 采 
用 类 似 的 操作 方法 ， 分 别 在 “ 迎 ” 图 层 的 第 4 帧 和 第 8 帧 之 间 、“ 光 ”图 层 的 第 5 帧 和 第 
9 帧 之 间 、“ 临 ”图 层 的 第 6 帧 和 第 10 帧 之 间 创 建 补 间 动 画 。 此 时 ， 在 “时 间 轴 ”面板 
中 ， 图 层 分 布 如 图 3-14 所 示 。 




















3-14 ”最 终 的 图 层 分 布 


(13) 演示 动画 。 在 菜单 栏 中 选择 “控制 ”|“ 测 试 影片 ”命令 ， 即 可 演示 动画 。 在 该 
动画 中 ， 共 有 五 个 图 层 ， 分 别 是 FLASH、“ 欢 ”“ 迎 ”“ 光 ”和 “ 临 ” 图 层 ， 每 个 图 层 
中 的 动画 同时 播放 。 这 样 ， 整 个 动画 效果 就 是 : 在 四 个 文字 发 生 移动 的 同时 ， 其 大 小 和 亮 
度 同 时 变化 ， 最 终 以 高 亮度 闪 过 。 
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(14) 保存 Flash 文档 。 在 菜单 栏 中 选择 “文件 ”|“ 保 存 ” 命 令 ， 在 弹出 的 “另存 
为 ”对 话 框 中 选 定 相应 的 文件 夹 ， 将 文档 命名 为 3-2.fla。 然 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 
将 动画 设计 结果 保存 在 .fla 格式 的 Flash 文档 中 。 

(15) 发 布设 置 。 在 菜单 栏 中 选择 “文件 ”|“ 发 布设 置 ”命令 ,会 弹出 “发 布设 置 ” 
对 话 框 。 如 图 3-15 所 示 ， 在 “发 布设 置 ” 对 话 框 的 “格式 ”选项 卡 中 确认 选中 Flash 
(.swf) 和 HIML (html) 。 
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图 3-15 发 布设 置 


(16) 发 布 动 画 。 在 菜单 栏 中 选择 “文件 ”|“ 发 布 ”命令 ， 即 可 根据 Flash 文档 生成 同 
名 的 .swf 文件 ， 同 时 生成 同名 的 HTML 文档 〈3-2.html) 。 使 用 正 浏览 器 打开 该 HIML 
文档 ， 可 以 在 下 浏览 器 中 查看 SWF 动画 。 


6&4 制作 环绕 球体 旋转 的 文字 


结合 Fireworks 软件 ， 利 用 Flash 软件 能 够 更 方便 地 制作 动画 ， 同 时 提高 动画 的 制作 
效率 。 

【 例 3-3】 制作 环绕 球体 旋转 的 文字 。 人 制作 步骤 如 下 : 

(1) 新 建 Flash 文档 。 进 入 Flash 后 ， 在 菜单 栏 中 选择 “文件 ”|“ 新 建 ” 命 令 。 在 弹 
出 的 “新 建文 档 ” 对 话 框 中 选择 “Flash 文档 ”类 型 。 然 后 单 击 “确定 ”按钮 ， 即 可 新 建 
Flash 文档 ， 并 打开 动画 场景 编辑 区 。 

(2) 设置 Flash 文档 及 动画 场景 的 属性 。 在 菜单 栏 中 选择 “修改 ”|“ 文 档 ” 命 令 ， 则 
会 弹出 “文档 属性 ”对 话 框 。 在 “文档 属性 ”对 话 框 中 将 动画 场景 的 “尺寸 ”设置 为 
200px( 宽 ) x200px (高 )， 将 动画 场景 的 “背景 颜色 ”设置 为 “黑色 ”， 并 将 “ 帧 频 ” 
设置 为 5fps。 

(3) 设置 标尺 和 网 格 。 在 菜单 栏 中 选择 “视图 ”|“ 标 尺 ” 命 令 ， 即 可 设置 动画 场景 编 
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辑 区 的 标尺 。 在 菜单 栏 中 选择 “视图 ”|“ 网 格 ”|“ 编 辑 网 格 ” 命 令 ， 可 以 打开 “网 格 ” 
对 话 框 。 如 图 3-16 所 示 ， 在 “网 格 ” 对 话 框 中 设置 网 格 的 水 平和 垂直 基线 间距 ， 然 后 单 
击 “ 确 定 ”按钮 ， 即 可 在 动画 场景 编辑 区 中 设置 和 显示 网 格 。 标 尺 和 网 格 将 有 助 于 动画 元 
件 在 动画 场景 编辑 区 中 的 快速 定位 。 


























图 3-16 设置 网 格 


(4) 制 作 图 形 Ball 元 件 。 在 菜单 栏 中 选择 “插入 ”| “新建 元 件 ” 命 令 ， 然 后 在 “创建 
新 元 件 ” 对 话 框 中 输入 新 元 件 的 名 称 Ball， 并 选择 “图 形 ” 类 型 ， 最 后 单 击 “确定 ” 按 
钮 ， 即 可 创建 新 的 图 形 元 件 Ball， 并 将 该 图 形 元 件 添加 到 Flash 窗口 右边 的 “ 库 ” 面 板 
中 。 同 时 ， 在 Flash 窗口 的 中 间 打 开元 件 编 辑 区 。 

在 “工具 ”面板 中 单 击 “椭圆 工具 ”， 在 元 件 编辑 区 中 通过 拖 动 鼠 标 绘制 一 个 正 
圆 。 然 后 ， 通 过 Flash 窗口 下 方 的 “属性 ”面板 将 圆 形 精确 定位 在 元 件 编辑 区 的 正中 央 ， 
同时 将 圆 形 的 宽 和 高 均 设 置 为 140 像素 。 

在 菜单 栏 中 选择 “窗口 ”|“ 混 色 器 ”命令 ， 在 Flash 窗口 右 方 打开 “ 混 色 器 ”窗口 。 
如 图 3-17 所 示 ， 设 置 混 色 器 。 

在 “工具 ”面板 中 单 击 “ 颜 料 桶 工具 ”， 单 击 圆 形 的 中 心 点 。 然 后 ， 使 用 “工具 ” 
面板 中 的 “填充 变形 工具 ”将 球体 的 色彩 方向 调整 到 如 图 3-18 所 示 。 
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图 3-17 设置 混 色 器 图 3-18 设置 球体 的 色彩 方向 
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(5) 制作 旋转 文字 “* WellcomeToHere * WellcomeToHere”。 

首先 ， 在 Fireworks 中 制作 环绕 圆圈 的 文字 。 

QD 打开 Fireworks， 创 建 宽度 和 高 度 均 为 200 像素 、 背 景 颜色 为 黑色 的 画布 。 

@ 在 画布 中 央 绘 制 直径 为 120 像素 的 实 线 圆圈 。 

@ 在 画布 中 添加 字体 为 Arial Black、 大 小 为 16、 颜 色 为 绿色 的 文字 “* Wellcome 
ToHere * WellcomeToHere”， 并 将 该 文字 设置 为 粗 体 。 

@ 将 文字 “*WellcomeToHere * WellcomeToHere” 附 加 到 圆圈 上 ， 并 使 文字 两 端 对 齐 。 

@@ 使 用 Ctrl+C 组 合 键 ， 将 环绕 圆圈 的 文字 “* WellcomeToHere * WellcomeToHere” 
复制 到 Windows 剪贴 板 。 

然后 ， 在 Flash 中 制作 旋转 文字 。 

Q@ 在 Flash 窗口 中 ， 切 换 到 动画 场景 编辑 区 ， 使 用 Ctl+V 组 合 键 ， 从 Windows 前 贴 
板 中 粘贴 环绕 圆圈 的 文字 “* WellcomeToHere * WellcomeToHere”。 此 时 ， 在 “ 库 ” 面 板 
中 会 自动 增加 一 个 位 图 ， 将 该 位 图 重新 命名 为 WellcomeToHere。 至 此 ，“ 库 ”面板 中 的 
元 件 如 图 3-19 (a) 所 示 。 

Q@ 在 菜单 栏 中 选择 “插入 ”|“ 新 建 元 件 ” 命 令 ， 创建 名 称 为 Rotating 
WellcomeToHere、 类 型 为 “影片 剪辑 ”的 新 元 件 ， 并 进入 元 件 编辑 区 。 

@ 从 “ 库 ” 面 板 中 将 位 图 WellcomeToHere 拖 放 到 元 件 编辑 区 。 然 后 ， 在 “属性 ” 面 
板 中 调整 位 图 的 宽 、 高 、X 和 Y 属性 ， 使 位 图 WellcomeToHere 位 于 元 件 编辑 区 的 正中 
央 。 此 时 ， 完 成 “影片 剪辑 ”元 件 Rotating WellcomeToHere 中 第 1 帧 动画 的 制作 。 

@ 在 面板 中 右 击 第 50 帧 ， 在 弹出 的 快捷 菜单 中 选择 “插入 关键 帧 ”命令 。 

@ 在 “时 间 轴 ”面板 中 单 击 第 1 帧 。 然 后 ， 在 “属性 ”面板 中 将 “ 补 间 ”项 设置 为 
“动画 ”、 将 “旋转 ”项 设置 为 “ 顺 时 针 ”。 这 样 ， 即 可 在 第 1 帧 和 第 50 帧 两 个 关键 帧 基 
础 上 创建 补 间 动 画 。 

至 此 ，“ 库 ”面板 中 的 元 件 如 图 3-19 (b) 所 示 。 其 中 ，“ 影 片 剪辑 ”元 件 Rotating 
WellcomeToHere 是 在 位 图 WellcomeToHere 基础 上 创建 的 。 
































(a) 插入 元 件 前 (b) 插入 元 件 后 


图 3-19 “ 库 ” 及 其 中 的 元 件 
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(6) 在 Flash 窗口 中 切换 到 动画 场景 编辑 区 ， 布 置 整个 动画 的 场景 。 

@ 从 “ 库 ” 面 板 将 “图 形 ” 元 件 Ball 拖 放 到 动画 场景 编辑 区 ， 将 元 件 Ball 的 高 和 宽 
均 设置 为 140 像素 ， 并 将 其 调整 到 动画 场景 编辑 区 的 正中 央 。 

@ 从 “ 库 ” 面 板 将 “影片 剪辑 ”元 件 Rotating WellcomeToHere 拖 放 到 动画 场景 编辑 
区 ， 将 元 件 Rotating WellcomeToHere 的 高 和 宽 均 设置 为 180 像素 ， 并 将 其 调整 到 动画 场景 
编辑 区 的 正中 央 。 

@ 在 “工具 ”面板 中 选择 “文本 工具 ”。 然 后 ， 在 元 件 Ball 
上 方 输入 文本 “欢迎 光临 《网 页 设计 与 制作 》 课 程 网 站 ”， 将 文 
本 的 字体 、 大 小 和 颜色 分 别 设置 为 “楷体 GB2312”、16 像素 和 
紫色 ， 并 将 文本 设置 为 粗 体 和 居中 对 齐 。 

整个 动画 的 场景 布置 如 图 3-20 所 示 。 

(7) 演示 动画 。 在 菜单 栏 中 选择 “控制 ”|“ 测 试 影片 ” 命 
令 ， 即 可 演示 动画 。 文 本 “* WellcomeToHere * WellcomeToHere” 
会 环绕 球体 并 按 顺 时 针 方 向 旋转 。 

(8) 保存 Flash 文档 ， 将 文档 命名 为 3-3.fla。 然 后 ， 发 布 并 生 图 3-20 动画 场景 布置 
成 同名 的 .swf 文件 。 


在 Flash 软件 中 ， 可 以 通过 使 用 元 件 、 关 键 帧 、 补 间 等 技术 制作 平面 动画 。 

使 用 Flash 软件 制作 的 动画 文件 的 扩展 名 为 .fla。Flash 软件 可 以 对 这 种 格式 的 文件 进 
行 重新 处 理 和 加 工 。 

根据 Flash 文档 可 以 生成 网 络 中 最 常见 的 .swf 格式 动画 文件 。 


1. 比较 GIF 动画 和 SWF 动画 的 区 别 和 用 法 。 
2. 对 【 例 3-1】 中 的 动画 进行 重新 加 工 ， 使 其 中 的 文字 先 由 小 变 大 ， 再 由 大 变 小 。 然 
后 ， 发 布 并 生成 相应 的 .swf 动画 文件 。 
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万 维 网 迅速 发 展 的 一 个 重要 原因 就 是 HTML 的 问世 和 应 用 。 使 用 HTML 编写 的 网 页 
能 够 将 互联 网 中 的 各 种 信息 资源 组 织 起 来 ， 并 且 人 们 可 以 使 用 Web 浏览 器 轻松 地 访问 这 
些 信息 资源 。 

设计 和 改进 HTML 的 目的 之 一 是 把 存储 在 一 台 计 算 机 中 的 信息 资源 与 另 一 台 计 算 机 
中 的 文本 或 图 标 方 便 地 联系 在 一 起 ， 并 形成 一 个 有 机 整体 。 这 样 ， 人 们 不 用 考虑 具体 信息 
是 存储 在 本 地 计算 机 上 还 是 存储 在 互联 网 中 的 其 他 计算 机 上 。 只 需 使 用 鼠标 在 网 页 中 点 击 
一 些 文字 或 图 标 ， 就 可 以 访问 与 这 些 文 字 或 图 标 相关 联 的 信息 资源 ， 而 这 些 信息 资源 可 能 
存放 在 互联 网 中 的 任何 一 台 计 算 机 上 。 

HTML 4.01 规范 HTML 4.01 Specification) 是 使 用 最 为 广泛 的 HTML 标准 。 


个 表现 性 元 素 





HTML 4.01 规范 定义 了 近 100 种 元 素 ， 每 种 元 素 都 起 着 特定 的 作用 。 其 中 ， 某 些 元 素 
能 够 使 其 作用 的 内 容 表现 出 特定 的 视觉 效果 ， 这 些 元 素 也 因此 被 称 为 表现 性 元 素 
(Presentational Element) 。 

【 例 4-1】 在 HTML 文档 中 使 用 表现 性 元 素 ， 并 观察 这 些 元 素 对 其 内 容 产 生 的 特定 视 
觉 效果 。 具 体 步骤 如 下 : 

(1) 在 Notepad 软件 中 输入 以 下 HTML 代码 。 


<html> 

<head> 
<title> 表 现 性 元 素 </title> 

</head> 

<body> 
<s>s 元 素 : 定义 加 删除 线 的 文本 。</s> 
<strike>strike 元 素 : 和 s 元 素 一 样 ， 定 义 加 删除 线 的 文本 。</strike> 
<u>u 元素 : 定义 下 画 线 文本 。</u> 
<center>center 元 素 : 对 其 所 包括 的 文本 进行 水 平 居中 。</center> 
<i>i 元 素 : 定义 斜体 文本 。</i> 
<em>em 元 素 : 把 文本 定义 为 强调 的 内 容 。</em><br> 
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<b>b 元 素 : 定义 粗 体 文本 。</b> 
<strong>strong 元 素 : 把 文本 定义 为 语气 更 强 的 强调 的 内 容 。</strong> 
</body> 
</html> 


(2) 在 Notepad 软件 中 保存 HTML 文档 ， 并 将 其 命名 为 4-1.htm。 
(3) 使 用 正 浏览 器 打开 HIML 文档 4-1.htm。 网 页 的 浏览 效果 如 图 4-1 所 示 。 
标题 : 表现 性 元 素 - Microsoft Internet Explorer 


文件 E) ”编辑 EE) 查看 (V) 收藏 (4) 工具 中 帮助 HH) 
地 址 (0) 息 ] EWeb Page\exercise\ch044-1.htm 














3 元 素 二 定 头 加 删除 线 的 交 本 上 一 strike 元 来 :和 s 元 来 一 样 一 定 头 加 荞 除 线 的 交 本 上 一 u 元 素 ， 定 义 下 划 线 文本 。 
center 元 素 : le 

了 元 蒜 ， 旦 元 舍 供 浆 赤 约克 。 cm 而 匡 :， 杷 区 衣 管 义 为 给 

b 元 素 ， 显示 粗 体 文本 效果 。 strong 元 素 : 的 强 调 的 内 容 . 





图 4-1 使 用 IE 浏览 器 打开 HTML 文档 


在 本 例 中 ，s、strike、u (underlined) 、center、 i (italic) 、em (emphasis) 、b (bold) 
和 strong (strong emphasis) 等 元 素 有 一 个 共同 的 特性 : 使 其 作用 的 内 容 表 现 出 特定 的 视觉 
效果 。 soso 显示 文本 的 粗 体 和 斜体 效果 ， 还 是 对 文本 进行 
水 平 居中 、 或 是 把 文本 定义 为 强调 的 内 容 ， 都 是 使 内 容 〈 文 本 ) 表现 出 特定 的 视觉 效果 。 
因此 ，s、 u、center、i、em、b 和 strong 等 元 素 属于 表现 性 元 素 。 

然而 ， 现 在 的 HIML 建议 不 使 用 s、strike、u 和 center 元 素 ， 这 些 元 素 也 因此 称 为 被 
废弃 的 元 素 (Deprecated Element) 。 被 废弃 的 表现 性 元 素 及 其 作用 已 经 被 样式 〈Style) 所 
取代 。 使 用 样式 同样 能 使 元 素 作用 的 内 容 表现 出 特定 的 视觉 效果 。 有 关 样 式 的 相关 概念 和 
用 法 将 在 第 5 章 中 介绍 。 

在 em 元 素 后 使 用 了 br 元 素 。 在 HTML 中 ，br 元 素 是 一 个 空 元 素 ， 可 以 没有 结束 标 
签 ， 用 来 定义 强制 性 换行 〈forced line break) 。 

同 i 和 bb 元素 类 似 ，em 和 strong 元 素 也 能 使 它们 作用 的 文本 内 容 倾斜 或 加 粗 。 但 em 
和 strong 元 素 的 语义 性 更 强 ， 而 且 对 搜索 引擎 (如 Google) 更 加 友好 ， 容 易 被 搜索 引擎 捕 
获 和 收录 。 所 以 ， 推 荐 使 用 em 和 strong 元 素 替 代 1 和 元 素 。 

如 图 4-1 所 示 ， 如 果 i1、em、b 和 strong 等 元 素 在 HTML 文档 中 依次 出 现 ， 这 些 元 素 
中 的 内 容 在 网 页 的 同一 行 中 从 左 向 右 依 次 排列 。 因 此 ， 这 些 元 素 也 称 为 行内 元 素 (Inline 
Element) ， 或 内 联 元 素 。 而 center 元 素 中 的 内 容 在 网 页 中 独占 一 行 ，center 元 素 也 因此 称 
为 块 级 元 素 (Block-Level Element) 。 








G2 HTML 元 素 及 其 属性 





在 HTML 文档 中 ,很 多 元 素 都 带 有 属性 (Attribute) 。 使 用 属性 ， 可 以 进一步 说 明 或 
补充 元 素 在 HTML 文档 中 的 作用 。 属 性 及 其 属性 值 出 现在 元 素 的 开始 标签 中 。 带 有 属性 
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的 元 素 的 基本 格式 是 : 
< 元 素 名 属性 1= 属 性 值 1 属性 2= 属 性 值 2 …> 内 容 </ 元 素 名 > 
以 font 元 素 为 例 ， 其 属性 有 face、color 和 size， 分 别 定义 文本 的 字体 、 颜 色 和 大 小 。 


【 例 4-2】 使 用 元 素 及 其 属性 ， 并 观察 元 素 及 其 属性 的 作用 。 具 体 步骤 如 下 : 
(1) 在 Notepad 软件 中 输入 以 下 HTML 代码 。 





<html> 
<head> 
<title> 元 素 及 其 属性 </title> 
<meta name="keywords" content=" 网 页 设计 与 制作 "> 
</head> 
<body> 
<font face="Comic Sans MS" color=Green size=4>Hello, World!</font><br> 
<font face="Courier" color=Purple size=6>Hello, World!</font> 
<font face="Script" color=Blue size=8>Hello, World!</font> 
</body> 
</html> 


在 以 上 HTML 代码 中 ，meta 元 素 出 现在 HTML 文档 头 部 。meta 元 素 是 一 个 空 元 素 ， 
没有 结束 标签 。 使 用 meta 元 素 ， 可 以 描述 网 页 的 元 信息 (meta-information) 。 例 如 ， 在 
meta 元 素 的 开始 标签 中 使 用 name 和 content 属性 ， 可 以 定义 与 网 页 关联 的 特性 名 称 和 特性 
值 。meta 元 素 在 搜索 引擎 营销 (Search Engine Marketing，SEM) 中 非常 有 用 ， 可 以 为 网 页 
定义 一 组 关键 字 。 有 具体 方法 如 下 : 首先 ， 将 name 属性 值 设置 为 "keywords"; 然后 ， 在 
content 属性 值 中 定义 一 些 关 键 字 ， 关 键 字 之 间 用 逗号 “,” 分 开 。 某 些 搜索 引擎 在 遇 到 这 
些 关键 字 时 ， 会 用 这 些 关键 字 对 HTML 文档 进行 分 类 ， 这 样 ， 将 有 助 于 提升 网 页 在 搜索 
结果 中 的 排名 。 

在 HIML 文档 主体 ， 用 三 个 font 元 素 分 别 定义 了 三 组 字体 、 颜 色 和 大 小 各 不 相同 的 
“Hello, World!”。 

(2) 在 Notepad 软件 中 保存 HIML 文档 ， 并 将 其 命名 为 4-2.htm。 

(3) 使 用 正 浏览 器 打开 HIML 文档 4-2.htm。 网 页 的 浏览 效果 如 图 4-2 所 示 。 


文件 E) ”编辑 E) ”查看 (V) 收 毫 (A) 工具 中 ”帮助 (H) 
地 址 中 ) | 稳 | EWWeb Page\exercise\ch04W4-2 htm 国生 


Hello, World! 


Hello, World! Hlo, Wordd! 


恒 完 旨 最 我 的 电脑 





4-2 使 用 IE 浏览 器 打开 HTML 文档 


第 4 章 ， 超 文本 标记 语言 


注意 : 

@ 由 于 在 第 1 个 font 元 素 后 使 用 了 一 个 br 元 素 定义 强制 性 换行 ， 所 以 ， 第 1 个 font 
元 素 中 的 “Hello, Worldl” 单 独 显示 在 第 1 行 中 。 

@ font 元 素 属 于 行内 元 素 。 所 以 ， 第 2 个 和 第 3 个 font 元 素 中 的 “Hello, World!” 均 
显示 在 第 2 行 中 。 

@ font 元 素 属 于 表现 性 元 素 。 使 用 font 元 素 及 其 属性 face、color 和 size， 可 以 定义 
font 元 素 内 容 中 文本 的 字体 、 磊 色 和 大 小 。 同 时 ，font 元 素 也 属于 被 废弃 元 素 ， 其 作用 已 
经 被 样式 所 取代 。 


ks a 元 素 及 其 应 用 


在 HIML 文档 中 ， 使 用 a(anchor) 元 素 可 以 定义 内 部 书签 或 创建 超 链接 (Hyperlink ) 。 

在 a 元 素 的 开始 标签 中 使 用 name 属性 ， 可 以 在 HTML 文档 中 定义 内 部 书签 ， 以 标记 
a 元 素 在 网 页 中 的 所 在 行 。 然 后 ， 在 同一 HIML 文档 中 的 其 他 地 方 使 用 a 元 素 及 其 href 属 
性 ， 即 可 创建 指向 内 部 书签 所 在 行 的 超 链 接 。 

此 外 ， 在 a 元 素 的 开始 标签 中 使 用 href 属性 ， 还 可 以 创建 指向 互联 网 中 任何 信息 资源 
的 超 链 接 。 这 些 信 息 资 源 可 以 是 存储 在 本 地 计算 机 上 的 文档 〈 如 Word、Excel 文档 ) ， 也 
可 以 是 存储 在 互联 网 中 其 他 计算 机 上 的 文档 (如 HTML 文档 ) 。 

表 4-1 列 出 和 说 明了 a 元 素 中 常见 的 属性 及 其 用 法 。 

表 4-1 a 元 素 中 常见 的 属性 及 其 用 法 
属性 的 作用 和 用 法 


默认 值 ， 在 当前 Web 浏览 器 中 打开 网 页 
在 一 个 新 的 Web 浏览 器 中 打开 网 页 
在 HTML 文档 中 定义 内 部 书签 

注意 : a 元 素 的 title 属性 与 title 元 素 是 不 同 的 。 前 者 出 现在 a 元 素 的 开始 标签 中 ， 用 
于 指定 和 鼠标 指向 超 链 接 时 所 显示 的 提示 信息 ; 后 者 是 一 个 结构 性 元 素 ， 出 现在 HIML 文 
档 头 部 ， 且 是 head 元 素 的 一 个 子 元 素 。 

【 例 4-3】 在 HTML 文档 中 应 用 a 元 素 ， 并 观察 a 元 素 及 其 属性 的 作用 。 有 具体 步骤 
如 下 : 

(1) 在 Notepad 软件 中 输入 以 下 HTML 代码 。 











<htm1> 
<head><title>a 元 素 及 其 应 用 </title></head> 
<body> 


<a href="http://www.sina.com"> 创 建 指向 新 浪 网 的 超 链接 (没有 使 用 target 属性 ) 
</a><br> 


NY 
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<a href="http://www-sina-com" title=" 该 超 链接 指向 新 浪 网 " target="_self"> 
超 链接 (target 属性 值 为 self) </a><br> 

<a href="http://www.sina.com" title=" 该 超 链接 同样 指向 新 浪 网 " target="_blank"> 
超 链接 (target 属性 值 为 blank) </a><br> 

<a href="wordl .doc"> 创 建 指向 Word 文档 的 超 链接 </a> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

<a name="middle"> 在 网 页 的 中 间 位 置 定义 内 部 书签 middle</a> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

<a href="#"> 信 返回 本 网 页 项 部 </a> 

<br> 

<a href="#middle"> 信 返回 书签 middle 所 在 行 </a> 

</body> 
</html> 


在 以 上 代码 中 ，<a hre 人 "http://www.sina.com"> 创 建 指向 新 浪 网 的 超 链 接 ，<a hre 伍 
"word1.doc"> 创 建 指 向 Word 文档 “word1.doc” 的 超 链接 ，<a name="middle"> 在 网 页 的 中 
间 位 置 定义 内 部 书签 middle，<a hre 伍 "#"'> 创 建 指向 网 页 项 部 的 超 链 接 ，<a hre 仁 "#middle"> 
创建 指向 书签 middle 所 在 行 的 超 链接 。 

(2) 在 Notepad 软件 中 保存 HTML 文档 ， 并 将 其 命名 为 4-3.htm。 

(3) 在 HTML 文档 4-3.htm 所 在 的 文件 夹 中 新 建 一 个 Word 文档 ， 保 存 该 Word 文档 
并 将 其 命名 为 wordl.doc。 


注意 : 由 于 Word 文档 wordl.doc 与 HTML 文档 4-3.htm 在 同一 文件 夹 中 ， 所 以 元素 
的 href 属性 值 可 以 直接 使 用 Word 文档 的 文件 名 ， 即 上 述 HTML 代码 中 的 <a hre 人 = 


"word1.doc">。 
(4) 使 用 正 浏览 器 打开 HIML 文档 4-3.htm。 网 页 的 浏览 效果 如 图 4-3 所 示 。 


DE:\Web Page\exercise\ch04\4-3.htn 


GSO- 加 二 we Paes\exer 轿 | 好 |X| 国 下 


二 本 天 Bre Page\exercise\chD4\4-3. htn 
































创建 E 超 链 接 使 用 target 属性 ) 


超 链 接 (target 属 性 值 为 blank) 
创建 指向 Word 文 档 的 超 链接 同样 指 























图 4-3 使 用 IE 浏览 器 打开 HTML 文档 


在 网 页 中 ， 单 击 文本 “创建 指向 新 浪 网 的 超 链接 〈 没 有 使 用 target 属性 ) ”， 可 以 在 
当前 Web 浏览 器 中 打开 新 浪 网 的 首页 。 将 鼠标 移动 到 文本 “ 超 链接 (target 属性 值 为 
_blank) ”上 面 时 ， 会 出 现 提示 信息 “该 超 链接 指向 新 浪 网 ”; 单 击 该 文本 时 ， 将 在 一 个 
新 的 Web 浏览 器 中 打开 新 浪 网 的 首页 。 将 鼠标 移动 到 文本 “ 超 链 接 (target 属性 值 为 
_self) ”上 面 时 ， 会 出 现 提示 信息 “该 超 链接 同样 指向 新 浪 网 ”; 单 击 该 文本 时 ， 可 以 在 
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当前 Web 浏览 器 中 打开 新 浪 网 的 首页 。 单 击 文本 “创建 指向 Word 文档 的 超 链 接 ”， 将 弹 
出 “文件 下 载 ” 对 话 框 ， 在 该 对 话 框 中 单 击 “ 打 开 ” 按 钮 ， 可 以 在 正 浏览 器 中 打开 Word 
文档 wordl.doc。 以 上 超 链 接 都 是 创建 在 文本 之 上 的 ， 所 以 ， 这 些 超 链接 也 称 为 文本 超 
链接 。 

缩小 正 浏览 器 的 高 度 ， 并 使 用 浏览 器 右 侧 的 滚动 条 ， 显 示 网 页 的 最 下 方 ， 如 图 4-4 
所 示 。 








EE 
文件 上 E) ”编辑 E) ”查看 (V) ”收藏 四 ) 工具 中 才 助 (H) EE 
地 址 中 ) | 镶 ] EWWeb Pagevexercisevch04M-3 htm ~ 转 到 
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图 4-4 只 显示 网 页 的 最 下 方 


在 网 页 中 ， 单 击 文本 “返回 本 网 页 顶部 ”， 可 以 返回 网 页 的 开始 位 置 ， 单 击 文本 
“返回 书签 middle 所 在 行 ”， 可 以 返回 网 页 的 中 间 位 置 ， 即 HTML 文档 中 内 部 书签 
middle 的 所 在 行 。 


注意 : 默认 情况 下 ， 未 被 访问 的 文本 超 链接 是 蓝 色 的 并 且 有 下 画 线 ， 已 被 访问 的 文 
本 超 链接 则 是 紫色 的 并 且 有 下 画 线 。 


人 4 标题 元 素 


HTML 有 六 个 分 级 的 标题 (Heading ) 元 素 ， 分 别 是 hl、h2、h3、h4、h5 和 h6 元 素 。 
使 用 标题 元 素 ， 可 以 在 网 页 上 创建 分 级 标题 。 
【 例 4-4】 在 网 页 中 创建 如 图 4-5 所 示 的 三 级 标题 。 


文件 E) ”编辑 E) 查看 以 (A) 工具 中 才 
地 址 (0) 人 Eweb Page\exercise\ch04W_4 htm 


第 1 章 数据 库 技术 概述 (1 级 标题 ) 
1. 1 数据 管理 技术 的 发 展 2 级 标题 ) 


1. 1.1 人 工 管理 阶段 (3 级 标题 》 
1. 1.2 文件 系统 阶段 (3 级 标题 》 
1. 1. 3 数据 库 系统 阶段 (3 级 标题 》 


狠 充 和 
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相应 的 HTML 代码 如 下 : 


<html> 
<head><title> 标 题 元素 </title></head> 
<body> 
<hl> 第 1 章 数据 库 技术 概述 (1 级 标题 ) </h1> 
<h2> 1.1 数据 管理 技术 的 发 展 (2 级 标题 )》</h2> 
<h3> 1.1.1 人 工 管理 阶段 (3 级 标题 ) </h3> 
<h3> 1.1.2 文件 系统 阶段 (3 级 标题 ) </h3> 
<h3> 1.1.3 数据 库 系统 阶段 (3 级 标题 ) </h3> 
</body> 
</html> 


注意 : 

@ hl、h2、h3、h4、h5 和 h6 等 标题 元 素 属于 块 级 元 素 。 因 此 ， 标 题 元 素 中 的 内 容 
(文本 ) 在 网 页 中 独占 一 行 。 

@ 和 html、head、body 和 title 元 素 类 似 ，hl、h2、h3、h4、h5 和 h6 等 标题 元 素 也 
属于 结构 性 元 素 ， 能 够 反映 HTML 文档 中 相关 文本 之 间 的 层次 结构 。 


.5 段落 元 素 


在 HTML 文档 中 ,使 用 p 元 素 可 以 在 网 页 中 将 一 段 文本 定义 为 段落 (Paragraph) 。 
Web 浏览 器 会 自动 在 段落 的 前 后 添加 空 行 。 如 果 希 望 在 不 产生 一 个 新 段落 的 情况 下 换行 ， 
可 以 在 p 元素 内 使 用 br 元 素 定义 强制 性 换行 。 

【 例 4-5】 在 HTML 文档 中 使 用 p 元 素 定义 段落 。HIML 代码 如 下 : 


<html> 
<head><title> 段 沙 元 素 </title></head> 
<body> 
<p><em> 互 联网 (Internet) </em>， 又 称 <strong> 因 特 网 </strong>， 意 为 “互相 连接 
在 一 起 的 计算 机 网 络 ”。 在 互联 网 中 利用 专门 的 技术 和 协议 例如 TcP/IP 和 FTP)， 能 够 将 全 球 的 计算 
机 连接 在 一 起 ， 从 而 实现 信息 资源 共享 和 信息 交换 。 而 万 维 网 (Worlq Wide Web，WWwW) 则 建立 在 互 
联网 基础 之 上 。</p> 
<p> 万 维 网 的 核心 包括 三 个 部 分 。<br>1. 超 文本 标记 语言 (HyperText Markup Language， 
HTML)， 其 主要 作用 是 定义 HTML 文档 ( 即 网 页 ) 的 内 容 和 结构 。 对 于 信息 资源 的 创建 者 和 提供 者 而 言 ， 
使 用 网 页 ， 能 够 将 互联 网 中 的 信息 资源 以 结构 化 和 可 视 化 的 形式 进行 有 效 组 织 。 而 在 信息 资源 的 需求 方 ， 
使 用 Web 浏览 器 (Web Browser) 打开 网 页 ， 能 够 轻松 识别 和 访问 互联 网 中 的 信息 资源 。<br>2. 超 文 
本 传送 协议 (HyperText Transfer Protocol，HTTP)， 人 负责 Web 浏览 器 和 服务 器 之 间 的 信息 交换 。 
<br>3. 统一 资源 标识 符 (Uniform Resource Identifier，URI)。URI 是 用 于 标识 互联 网 中 信息 
资源 的 字符 串 。URI 可 被 视 为 统一 资源 名 称 (Uniform Resource Name，URN)、 统 一 资源 定位 符 
(Uniform Resource Locator，URL) 或 两 者 兼备 。URN 如 同一 个 人 的 姓名 ， 而 URL 则 如 同一 个 人 
的 住址 。 如 果 说 ，URN 是 对 互联 网 中 某 一 信息 资源 的 命名 ， 那 么 ，URL 则 定义 信息 资源 在 互联 网 中 的 位 
置 。 因 此 ，URL 能 够 提供 在 互联 网 中 查找 该 信息 资源 的 路 径 。</p> 
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</body> 

</html> 

在 以 上 HTML 代码 中 ， 使 用 两 个 p 元 素 定 义 了 两 个 段落 。 

在 第 1 个 段落 中 ， 使 用 em 元 素 和 strong 元 素 分 别 对 文本 “互联 网 (Intemet)” 和 “ 因 
特 网 ”进行 了 强调 性 格式 化 。 因 此 ,文本 “互联 网 (Intemet) ”和 “因特网 ”会 表现 出 与 
其 他 文本 不 同 的 视觉 效果 ， 这 样 容易 引起 网 页 浏览 者 的 注意 。 

在 第 2 个 段落 中 ， 使 用 三 个 br 元 素 定 义 了 三 个 强制 性 换行 。 

使 用 正 浏 览 器 打开 HTML 文档 4-5.htm， 网 页 的 浏览 效果 如 图 4-6 所 示 。 
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又 称 镶 特 网 意 为 “互相 连接 在 一 起 的 计算 机 网 络 ”。 在 互联 网 中 利用 专门 的 技术 和 协议 
能 只 才 束 的 计算 术 连 按 在 一 起， 从 而 实现 信息 资源 共享 和 信息 交换 。 而 万 维 网 (World 
同 de et， 则 建立 在 下联 届 基 础 


全 和 个 部 分 

超 文本 标记 语言 《HyperText Jarkup Language，HTIL) ， 其 主要 作用 是 定义 HDL 文档 〔 即 网 页 ) 的 内 
杨 。 坟 下 起 交 二 9 刘 过 守 和 提供 者 而 言 ， 使 用 网 页 ， 能 驳 将 互联 网 中 的 信息 资源 以 结构 化 和 可 视 化 的 形 : 
有 而 在 信息 资源 的 需求 方 ， 使 用 Web 浏 览 器 (Web Browser) 打开 网 页 ， 能 够 轻松 识别 和 访问 互联 


信息 资源 。 

全 超 文本 传送 协议 (HyperText Transfer Protocol，HTITP) ， 多 
统一 资源 标识 符 (Uniform Resource nie URI) 。URI 是 用 于 标识 互联 网 中 信息 资源 的 字符 串 。URI 可 

被 视 为 统一 资源 名 称 ey Resource Name，URN) 、 统 一 资源 定位 符 (Uniform Resource Locator, URL) 

两 者 URN 如 同一 个 人 的 姓名 ， 启 0RL 则 训 局 一 个 人 的 住址 。 加 果 说 ，URN 是 对 互联 网 中 某 一 信息 资源 的 命名 ， 

那么 ， TS 因此 ，URL 能 够 提供 在 互联 网 中 查找 该 信息 资源 的 路 径 。 





图 4-6 使 用 p 元素 定义 段落 


注意 : 
@ p 元 素 既 是 块 级 元 素 ， 又 是 结构 性 元 素 。 
加 全 包含 其 他 的 块 级 元 素 ， 也 可 以 包含 行内 元 素 ， 还 可 以 包含 文本 内 容 。 
例如 ， 在 本 例 中 ， 第 1 个 p 元 素 就 包含 一 个 em 元 素 和 一 个 strong 元 素 。 换 句 话 说， 第 1 
个 p A 一 个 是 em 元素 ， 一 个 是 strong 元 素 ; em 元 素 和 strong 元 素 的 父 
元 素 都 是 p 元 素 。 
图 行内 元 素 可 以 包含 内 容 和 其 他 的 行内 元 素 ， 但 不 能 包含 块 级 元 素 。 


人 6' 列表 元 素 


如 图 4-7 所 示 ，HTML 支持 无 序列 表 (Unordered List) 和 有 序列 表 (Ordered List) 。 
每 个 列表 由 若干 个 列表 项 〈List Item) 组 成 。 在 无 序列 表 中 ， 每 个 列表 项 的 前 面 附加 有 一 
个 小 黑 点 。 在 有 序列 表 中 ， 每 个 列表 项 的 前 面 标记 有 数字 。 

在 HIML 文档 中 ， 分 别 使 用 世 、ol 和 二 元 素 定义 无 序列 表 、 有 序列 表 和 列表 项 。 
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E 。 EWeb Pageiexerciselch044 6.htm - Microsoft internet Explorer 
文件 EE) ”编辑 E) ”查看 (V) 收 若 内 ) 工具 加 帮助 (H) 
地 址 (0) 和 | EWeb Page\exercise\ch04W-8 htm J 图 村 


无 序列 表 





。 咖 啡 
茶 


,和 
有 序列 表 
1. 咖啡 
2. 茶 
3. 牛奶 
御 羌 毕 





图 4-7 无 序列 表 和 有 序列 表 


【 例 4-6】 在 网 页 中 创建 如 图 4-7 所 示 的 无 序列 表 和 有 序列 表 。 相 应 的 HTML 代码 
如 下 : 


<html> 
<head><title> 列 表 元 素 </title></head> 
<body> 
无 序列 表 
<ul> 
<1i> 咖 啡 </1i><1i> 茶 </1i><1i> 牛 奶 </1i> 
</ul> 
有 序列 表 
<ol> 
<1i> 咖 啡 </1i><1i> 茶 </1i><1i> 牛 奶 </1i> 
</o1> 
</body> 
</html> 


注意 : UU、ol 和 下 元 素 都 是 块 级 元 素 。 对 于 这 三 个 元 素 ， 每 个 元 素 中 的 内 容 (文本 ) 
在 网 页 中 都 独占 一 行 。 


.7 表格 元 素 





使 用 HIML 可 以 在 网 页 中 定义 表格 (Table) 。 表 格 主要 用 来 组 织 和 显示 数据 。 

如 图 4-8 所 示 ， 表 格 主要 包括 标题 (Caption) 、 表 格 头 (Table Header) 和 表格 体 (Table 
Body) 。 默 认 情况 下 ， 标 题 位 于 表格 的 上 方 。 通 常情 况 下 ， 表 格 头 由 一 个 表格 行 (Table 
Row) 组 成 ， 其 中 的 表 头 单元 格 (Table Header Cell) 用 来 设置 列 标题 ， 因 此 表格 头 中 的 表 
格 行 也 称 为 列 标题 行 ， 表 格 体 由 多 个 表格 行 (Table Row) 组 成 ， 其 中 的 数据 单元 格 (Table 
Data Cell) 用 来 组 织 和 显示 数据 ， 因 此 表格 体 中 的 表格 行 也 称 为 数据 行 。 
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列 标题 行 
数据 行 




















这 和 天 本 天 

















图 4-8 表格 及 其 结构 

















表 4-2 列 出 了 在 HTML 文档 中 定义 表格 时 使 用 的 主要 元 素 及 其 常用 属性 。 
表 4-2 定义 表格 时 使 用 的 主要 元 素 及 其 常用 属性 





tr 定义 表格 行 

由 定义 表 头 单元 格 

td 定义 数据 单元 格 
【 例 4-7】 在 HIML 文档 中 定义 如 图 4-8 所 示 的 表格 。 具 体 步 骤 如 下 : 
(1) 在 Notepad 软件 中 输入 以 下 HIML 代码 。 





<html> 
<head><title></title></head> 
<body bgcolor=#FFEEDD> 
<table align=center bgcolor=#CCBBAA border=10> 
<caption align=top> 标 题 </caption> 
<thead> 
<tr> 
<th> 表 头 单元 格 : 第 1 列 标题 </th><th> 表 头 单元 格 : 第 2 列 标题 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 第 1 行 第 1 列 的 数据 单元 格 </td><td> 第 1 行 第 2 列 的 数据 单元 格 </td> 
</tr> 
<tr> 
<td> 第 2 行 第 1 列 的 数据 单元 格 </td><td> 第 2 行 第 2 列 的 数据 单元 格 </td> 
</tre> 
</tbody> 
</table> 
</body> 
</html> 
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在 以 上 代码 中 ，body 和 table 元 素 都 带 有 属性 bgcolor， 分 别 定义 主体 和 表格 的 背景 颜 
色 。 在 计算 机 程序 (包括 HTML 代码 ) 中 ， 颜 色 通常 由 一 个 六 位 的 十 六 进 制 数 来 定义 。 其 
中 ， 前 面 两 位 十 六 进 制 数 表 示 红 色 占 比 ， 中 间 两 位 十 六 进 制 数 表 示 绿 色 占 比 ， 后 面 两 位 十 
六 进 制 数 表 示 蓝 色 占 比 。 例 如 ， 考 F0000 代表 红色 ，#00FF00 代表 绿色 ，#0000FF 代表 蓝 
色 。 在 HTML 文档 中 ， 也 可 以 直接 使 用 一 些 预 先 定 义 的 颜色 名 ， 如 black、blue、gray、 
green、 purple、red、silver、white 和 yellow。 

table 和 caption 元 素 都 带 有 属性 align， 分 别 定义 表格 的 对 齐 方式 和 标题 的 位 置 。table 
元 素 的 align 属性 值 可 以 是 left、center 或 right。caption 元 素 的 align 属性 值 可 以 是 top、 
bottom、left 或 right。 

table 元 素 的 属性 border 用 来 定义 表格 边框 的 宽度 ， 其 度量 单位 是 像素 (pixel) 。 

(2) 在 Notepad 软件 中 保存 HTML 文档 ， 并 将 其 命名 为 4-7.htm。 

(3) 使 用 正 浏览 器 打开 HIML 文档 4-7.htm， 网 页 的 浏览 效果 如 图 4-8 所 示 。 由 于 将 
table 元 素 的 align 属性 值 设置 为 center， 所 以 ， 调 整 正 浏览 器 的 宽度 后 ， 表 格 在 正 浏览 器 
内 将 重新 水 平 居 中 。 


ks img 元 素 及 其 应 用 














在 HTML 文档 中 ， 使 用 img 元 素 可 以 在 网 页 中 嵌入 图 像 (Image) 。 存 储 图 像 的 文件 
格式 一 般 是 .gif 和 .jpeg，.gif 和 .jpeg 文件 占用 很 小 的 存储 空间 。 因 此 ， 在 网 络 中 传输 .gif 
和 .jpeg 文件 所 需 的 时 间 开 销 很 小 ， 可 以 使 网 站 访问 者 体会 到 较 快 的 网 页 浏览 速度 。 但 从 
本 质 上 讲 ，img 元 素 并 不 是 直接 在 网 页 中 插入 图 像 ， 而 是 定义 指向 图 像 文 件 的 超 链接 。 此 
外 ，img 元 素 为 所 链接 的 图 像 创建 占 位 空间 。img 元 素 的 属性 及 其 用 法 见 表 4-3。 


表 4-3 img 元 素 的 属性 及 其 用 法 











属性 必 选 /可 选 
sre 必 先 
alt 可 先 
width 可 先 
height 可 选 
【 例 4-8】 使 用 img 元 素 在 网 页 中 媒 入 图 像 ， 并 观察 img 元 素 及 其 属性 的 作用 。 具 体 
步骤 如 下 : 
(1) 在 Notepad 软件 中 输入 以 下 HTML 代码 。 
<html> 
<head><title>img 元 素 及 其 应 用 </title></head> 
<body> 
<img src="../ch02/2-4.gif" width=200 height=50><br><br> 
<img src="../ch02/2-4.gif" alt="GIF 动画 图 片 "> 
</body> 


</html> 
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在 以 上 HTML 代码 中 ， 第 1 个 img 元 素 的 src 属性 值 “../ch02/2-4.gif” 表 示 ， 所 檬 入 
图 像 的 文件 2-4.gif 保存 在 当前 HTML 文档 所 在 文件 夹 的 上 一 级 文件 夹 的 下 一 级 文件 夹 
ch02 中 。 

在 HIML 文档 中 创建 超 链 接 或 嵌入 图 像 时 ， 经 常 需要 引用 同一 计算 机 上 不 同文 件 夹 
中 的 文件 。 此 时 ， 可 以 使 用 相对 路 径 (Relative Path) 或 绝对 路 径 (Absolute Path) 指定 被 
引用 文件 在 同一 计算 机 中 的 存储 位 置 。 

相对 路 径 及 其 表示 方法 与 文件 夹 的 层次 结构 密切 相关 。 图 4-9 表示 EE 盘 上 的 文件 夹 及 
其 层次 结构 ， 当 前 HTML 文档 是 “E:/WebPage/exercise/ch04/4-8.htm”。 在 HIML 文档 
4-8.htm 中 ， 相 对 路 径 “./” 表 示 当 前 HTML 文档 所 在 文件 夹 的 上 一 级 文件 夹 ， 即 文件 夹 
exercise; 相对 路 径 “./ ../” 表 示 当 前 HTML 文档 所 在 文件 夹 的 上 上 级 文件 夹 ， 即 文件 夹 
WebPage; “../ch02/2-4.gif” 则 表示 文件 夹 ch02 中 的 文件 2-4.gif。 














和 i 
| _ 23 | 2-4.gif 加 4-8 .htm | 4-9htm 1 


1 | 
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图 4-9 相对 路 径 与 文件 夹 的 层次 结构 


被 引用 文件 在 计算 机 中 的 存储 位 置 也 可 以 用 绝对 路 径 表示 。 例 如 ， 绝 对 路 径 “E:/Web 
Page/exercise/ch02/2-4.gif” 即 表示 图 像 文件 2-4.gif 保存 在 E 盘 的 WebPage/exercise/ch02 文 
件 夹 中 。 其 中 ，“E:/WebPage/exercise/ch02/” 即 是 绝对 路 径 。 

在 创建 超 链 接 或 嵌入 图 像 时 ， 如 果 被 引用 文件 的 路 径 不 正确 ， 就 无 法 打开 被 引用 文 
件 ， 或 无 法 在 Web 浏览 器 中 显示 图 像 。 

注意 : 由 于 文件 夹 的 层次 结构 是 相对 稳定 的 ， 所 以 通常 使 用 相对 路 径 指 定 文件 在 同 
一 计算 机 中 的 存储 位 置 。 

(2) 在 Notepad 软件 中 保存 HTML 文档 ， 并 将 其 命名 为 4-8.htm。 

(3) 使 用 正 浏览 器 打开 HTML 文档 4-8.htm， 网 页 的 浏览 效果 如 图 4-10 所 示 。 

如 图 4-10 所 示 ， 在 该 网 页 中 嵌入 了 两 个 图 像 ， 它 们 均 引用 同一 文档 2-4.gif， 该 文档 是 
一 个 400 像素 ( 宽 ) x100 像素 (高 ) 的 GIF 动画 图 片 。 但 由 于 img 元 素 的 属性 及 属性 值 不 
同 ， 两 个 图 像 的 显示 效果 是 不 一 样 的 。 
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E 
文件 E) ”编辑 E) ”查看 V) 收 襄 A) 工具 四 ”帮助 由) 
地 址 @) 乔 ] EWWeb Page\exercise\ch04W4-9 htm 


DREAMWERNER 





‘EAMWEABSER 





图 4-10 使 用 img 元 素 在 网 页 中 嵌入 图 像 


在 第 1 个 img 元 素 的 开始 标签 <img src="../ch02/2-4.gif" width=200 height=50> 中 ， 由 于 
设置 了 200 像素 〈 宽 ) x50 像素 (高 ) 的 固定 区 域 大 小 。 所 以 ， 图 片 2-4.gif 只 能 在 200 像 
素 〈 宽 ) x50 像素 (高 ) 区 域内 显示 。 

在 第 2 个 img 元 素 的 开始 标签 <img src="../ch02/2-4.gif' alt="GIF 动画 图 片 "> 中 ， 由 于 
省 略 了 width 和 height 属性 ， 所 以 图 片 2-4.gif 将 按照 原 有 尺寸 (400 像素 x100 像素 ) 显 示 。 
又 由 于 将 att 属 性 值 设 置 为 “GIF 动画 图 片 ”， 所 以 当 鼠 标 落 在 该 图 片上 时 ， 会 显示 替代 性 
文字 “GIF 动画 图 片 ”。 

注意 : 

@ 如 果 在 img 元 素 后 面 不 使 用 br 元 素 强 制 换行 ， 则 两 幅 动画 图 片 会 显示 在 同一 行 中 。 
因此 ，img 元 素 属 于 行内 元 素 。 

@) img 元 素 只 有 开始 标签 ， 而 没有 结束 标签 ， 所 以 img 元 素 是 空 元 素 。 





ks 行内 元 素 和 块 级 元 素 


在 HIML 文档 中 ，i、em、b、strong、a、img 和 span 等 元 素 称 为 行内 元 素 (Inline 
Element) ， 或 内 联 元 素 。hl1、h2、h3、h4、hs、h6、p、ul、ol、1 和 div 等 元 素 称 为 块 级 
元 素 (Block-Level Element) 。 

【 例 4-9】 行内 元 素 和 块 级 元 素 。HTML 代码 如 下 : 


<html> 
<head><title> 行 内 元 素 和 块 级 元 素 </title></head> 
<body> 
<a href="#">a 元 素 : 返回 页 首 </a> 
<img src="../ch02/2-4.gif"> 
<span>span 元 素 </span> 
<h1>hl 元 素 </h1><p>p 元 素 </p><div>div 元 素 </div> 
</body> 
</html> 
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上 述 HTML 代码 在 下 浏览 器 中 的 视觉 效果 如 图 4-11 所 示 。 


文件 E) 编辑 [E) 坦 : 


地 址 四 ) | 科 ] EWWeb Page\exercse\ch04W4-10 htm 


macromedia® 


NW FIREWORKS: 





图 4-11 行内 元 素 和 块 级 元 素 


如 图 4-11 所 示 ， 如 果 a、img 和 span 等 行内 元 素 在 HTML 文档 中 依次 出 现 ， 则 行内 元 
素 中 的 内 容 在 网 页 的 同一 行 中 从 左 向 右 依次 排列 。 而 hl、p 和 div 等 块 级 元 素 中 的 内 容 在 
网 页 中 独占 一 行 。 

行内 元 素 可 以 包含 内 容 和 其 他 的 行内 元 素 ， 但 不 能 包含 块 级 元 素 。 

通常 情况 下 ， 块 级 元 素 (尤其 是 div 元 素 ) 可 以 包含 其 他 的 块 级 元 素 ， 也 可 以 包含 行 
内 元 素 ， 还 可 以 包含 文本 内 容 。 但 也 有 例外 ， 例 如 ，p、hl、h2、h3、h4、h5、h6 等 块 级 
元 素 一 般 不 包含 其 他 的 块 级 元 素 。 

在 HTML 文档 中 ， 经 常 使 用 div 元 素来 定义 分 区 (division) ， 并 使 其 包含 其 他 的 块 级 
元 素 或 行内 元 素 。 使 用 div 元 素 ， 可 以 把 Web 浏览 器 窗口 划分 为 独立 的 、 不 同 的 矩形 区 
域 ， 每 一 矩形 区 域 用 于 实现 特定 的 功能 。 


人 人 结构 性 元 素 、 表 现 性 元 素 、 表 现 性 属性 


HTML 有 近 100 种 元 素 ， 每 种 元 素 及 其 属性 所 起 的 作用 各 不 相同 。 其 中 ， 有 些 元 素 属 
于 结构 性 元 素 ， 有 些 元 素 属于 表现 性 元 素 ， 而 有 些 属性 则 属于 表现 性 属性 。 
(1) 结构 性 元 素 。 结 构 性 元 素 主 要 用 来 描述 HTML 文档 或 网 页 内 容 的 组 成 结构 。 表 
4-4 列 出 了 常用 的 结构 性 元 素 及 其 作用 。 
表 4-4 常用 的 结构 性 元 素 及 其 作用 


























结构 性 元 素 元 素 的 作用 
html 定义 HTML 文档 
head 定义 HTML 文档 的 头 部 
title 定义 HTML 文档 的 标题 
body 定义 HTML 文档 的 主体 
hl、 h2、 h3、 h4、 h5、 h6 定义 1 一 6 级 标题 
p 定义 段落 
ul, ol、 li 定义 列表 
table、caption、thead、 也 、tbody、tr 和 td 定义 表格 
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(2) 表现 性 元 素 。 表 现 性 元 素 主要 用 来 设 定 文本 内 容 在 Web 浏览 器 中 的 视觉 效果 。 
表 4-5 列 出 了 一 些 表现 性 元 素 及 其 作用 。 


表 4-5 ”表现 性 元 素 及 其 作用 
































表现 性 元 素 元 素 的 作用 备注 
Ss 定义 加 删除 线 的 文本 已 被 废弃 (不 再 使 用 ) 
strike 定义 加 删除 线 的 文本 已 被 废弃 (不 再 使 用 ) 
u 定义 下 画 线 文本 已 被 废弃 〈 不 再 使 用 ) 
i 定义 斜体 文本 用 em 元素 替代 
em 定义 需要 强调 的 文本 内 容 一 
b 定义 粗 体 文本 用 strong 元 素 替 代 
strong 定义 更 加 需要 强调 的 文本 内 容 = 
center 对 文本 水 平 居 中 已 被 废弃 (不 再 使 用 ) 
font 定义 文本 的 字体 、 颜 色 和 大 小 已 被 废弃 〈 不 再 使 用 ) 


注意 ; 许多 表现 性 元 素 已 经 被 废弃 。 被 废弃 的 表现 性 元 素 及 其 作用 已 经 被 样式 
(Style ) 所 取代 。 使 用 样式 同样 能 使 元 素 作 用 的 内 容 表 现 出 特定 的 视觉 效果 。 有 关 样 式 的 
相关 概念 和 用 法 将 在 第 5 章 中 介绍 。 
(3) 表现 性 属性 。 与 表现 性 元 素 类 似 ， 表 现 性 属性 也 可 用 来 设 定 文本 内 容 在 Web 浏 
览 器 中 的 视觉 效果 。 表 4-6 列 出 了 在 一 些 元 素 中 常用 的 表现 性 属性 及 其 作用 。 
表 4-6 ”常用 的 表现 性 属性 及 其 作用 













属性 值 举 例 
定义 文本 的 字体 Comic Sans MS、STSong (宋体 ) 
定义 文本 的 颜色 Red、Green、Blue 
定义 文本 的 大 小 

left、 center, right 

body、table bgcolor E 体 、 表 格 的 背景 颜色 | #DDEEFF、Red 


定义 表格 标题 的 位 置 




















定义 图 像 的 宽度 
定义 图 像 的 高 度 


注意 : 同 被 废弃 的 表现 性 元 素 类 似 ， 表 现 性 属性 及 其 作用 已 经 被 样式 所 取代 。 


人 人 小 结 








HTML 4.01 规范 定义 了 近 100 种 元 素 ， 每 种 元 素 都 起 着 特定 的 作用 。 

元 素 的 属性 可 以 进一步 说 明 或 补充 元 素 在 HIML 文档 中 的 作用 。 

如 果 a、img 和 span 等 行内 元 素 在 HTML 文档 中 依次 出 现 ， 则 行内 元 素 中 的 内 容 在 网 
页 的 同一 行 中 从 左 向 右 依次 排列 。 而 hl、p 和 div 等 块 级 元 素 中 的 内 容 在 网 页 中 独占 
一 行 。 
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行内 元 素 可 以 包含 内 容 和 其 他 的 行内 元 素 ， 但 不 能 包含 块 级 元 素 。 

通常 情况 下 ， 块 级 元 素 〈 尤 其 是 div 元 素 ) 可 以 包含 其 他 的 块 级 元 素 ， 也 可 以 包含 行 
内 元 素 ， 还 可 以 包含 文本 内 容 。 但 也 有 例外 ， 例 如 ，p、hl、h2、h3、h4、h5、h6 等 块 级 
元 素 一 般 不 包含 其 他 的 块 级 元 素 。 

在 HIML 中 ，html、head、title、body、 标 题 (hl、h2、h3、h4、h5 和 h6) 、 段 落 
(p) 、 列 表 (ul、ol 和 1) 和 表格 (table、caption、thead、 也 、tbody、tr 和 td) 等 元 素 属 
于 结构 性 元 素 ， 这 些 元 素 主 要 用 来 描述 HTML 文档 或 网 页 内 容 的 组 成 结构 。 

s、strike、u、i、em、b、strong、center 和 font 等 元 素 属于 表现 性 元 素 ， 这 些 元 素 主 
要 用 来 设 定 文本 内 容 在 Web 浏览 器 中 的 视觉 效果 。 

face、color、size、align、bgcolor、border、width 和 height 等 元 素 属性 则 属于 表现 性 
属性 。 与 表现 性 元 素 类 似 ， 表 现 性 属性 也 可 用 来 设 定 文本 内 容 在 Web 浏览 器 中 的 视觉 
效果 。 

在 Web 标准 网 页 中 ， 被 废弃 的 表现 性 元 素 和 表现 性 属性 及 其 他 们 的 作用 已 经 被 样式 
所 取代 。 


人 习题 


1. 参照 图 1-2， 夯 出 【 例 4-7】 中 HTML 文档 的 树 形 层次 结构 图 。 
2， 按照 图 4-12 制作 网 页 并 编写 HTML 文档 。 











定义 表格 时 使 用 的 主要 元 素 及 其 常用 属性 
元 素 | 元 素 的 作用 属性 
驯 个 表格 








align、bgcolor、border 寺 




















图 4-12 组织 和 显示 数据 的 表格 


3. 在 a 元 素 内 部 使 用 img 元 素 可 以 在 图 像 上 创建 超 链 接 。 具 体 方法 如 下 : 首先 ， 下 
载 某 个 知名 网 站 的 logo 图 片 ， 然 后 ， 在 HTML 文档 中 创建 基于 该 logo 图 片 的 、 指 向 该 网 
站 的 超 链 接 。 

4. 举例 并 简 述 行内 元 素 和 块 级 元 素 的 特性 和 用 法 。 

5. 举例 并 简 述 结构 性 元 素 、 表 现 性 元 素 和 表现 性 属性 的 作用 。 
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在 设计 和 制作 网 页 时 ， 不 仅 要 提前 准备 好 文本 、 图 片 等 素材 ， 还 要 考虑 将 这 些 素材 
以 何 种 视觉 效果 《〈 如 文本 的 字体 、 颜 色 、 大 小 和 对 齐 方式 等 ) 展示 在 网 页 上 。 而 层 登 样式 
表 (Cascading Style Sheets，CSS) 能 够 很 好 地 解决 这 一 问题 ， 并 提高 网 页 设计 和 制作 的 
效率 。 


kr 网 页 的 内 容 、 结 构 与 表现 


通过 Web 浏览 器 看 到 的 网 页 ， 既 包括 文本 、 图 片 等 内 容 ， 又 包含 结构 和 表现 。 

1. 内 容 

内 容 (Content) 就 是 通过 网 页 展示 的 信息 ， 包 含 文本 或 者 图 片 等 。 其 中 ， 文 本 是 网 页 
中 最 常见 的 内 容 。 比 如 ， 我 们 想 在 网 页 上 展示 如 下 一 段 文 本 内 容 。 

静夜 思 ” 唐 .李白 

床 前 明月 光 ， 疑 是 地 上 和 霜 。 举 头 望 明 月 ， 低 头 思 故 乡 。 

这 是 写 远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 它 
不 追求 想象 的 新 颖 奇特 ， 也 握 弃 了 套 藻 的 精工 华美 ， 它 以 清新 朴素 的 笔触 ， 打 写 了 丰富 深 
由 的 内 容 。 境 是 境 ， 情 是 情 ， 那 么 台 真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 
它 是 “ 妙 绝 古今 ”。 

2. 结构 

虽然 上 面 一 段 文本 《〈 即 内 容 ) 已 经 完整 ， 但 还 可 以 对 文本 内 容 进 行 结构 化 ， 即 将 文本 
内 容 分 解 为 标题 、 作 者 、 正 本 和 简 析 四 个 部 分 。 

标题 静夜 思 

作者 唐 . 李 白 

正文 床 前 明月 光 ， 疑 是 地 上 箱 。 举 头 望 明月 ， 低 头 思 故乡 。 

简 析 这 是 写 远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意 
境 。 它 不 追求 想象 的 新 颖 奇特 ， 也 气 弃 了 辞藻 的 精工 华美 : 它 以 清新 朴素 的 笔触 ， 抒 写 了 
丰富 深 曲 的 内 容 。 境 是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 
有 人 赞 它 是 “ 妙 绝 古 今 ”。 

类 似 上 面 的 标题 、 作 者 、 正 文 和 简 析 ， 即 是 文本 内 容 的 结构 〈Structure) 。 显 然 ， 结 
构 能 使 文本 内 容 更 加 具有 逮 辑 性 和 易 读 性 。 
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3. 表现 

虽然 对 上 述 文 本 内 容 进 行 了 结构 化 ， 但 在 网 页 上 展示 这 些 文本 内 容 时 ， 还 可 以 使 用 
表现 性 元 素 和 表现 性 属性 对 文本 内 容 进行 修饰 。 这 样 ， 文 本 内 容 就 能 够 以 特定 的 字体 、 颜 
色 、 大 小 和 对 齐 方式 展示 在 网 页 上 ， 从 而 产生 特定 的 视觉 效果 。 文 本 内 容 的 字体 、 颜 色 
大 小 和 对 齐 方式 即 是 内 容 在 网 页 上 的 表现 (Presentation》。 

【 例 S-1】 网 页 的 内 容 、 结 构 和 表现 。HTML 代码 如 下 : 

<html> 

<head> 
<title> 内 容 、 结 构 和 表现 </title> 
</head> 
<body bgcolor=Silver> 
<hl align=center><font color=red> 静 夜 思 </font></hl> 
<h2 align=center> 唐 .李白 </h2> 
<p align=center><strong><font color=blue> 床 前 明月 光 ， 疑 是 地 上 霜 。<br> 
举 头 望 明 月 ， 低 头 思 故乡 。</font></strong></p> 
<p>【 简 析 】 这 是 写 远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉 人 的 秋 夜 的 意境 。 
它 不 追求 想象 的 新 颖 奇特 ， 也 据 弃 了 辞藻 的 精工 华美 ， 它 以 清新 朴素 的 笔 乔 ， 反 写 了 丰富 深 曲 的 内 容 。 
境 是 境 ， 情 是 情 ， 那 么 台 真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 古 今 ”。</p> 
</body> 

</html> 

在 上 述 HIML 代码 中 ， 结 构 性 元 素 hl 和 h2 分别 定义 了 标题 和 作者 ， 正 文 和 简 析 则 是 
使 用 结构 性 元 素 p 定义 的 。 这 样 ， 网 页 中 的 文本 内 容 就 具有 了 一 定 的 结构 。 

此 外 ， 在 上 述 HIML 代码 中 ， 在 body 元 素 中 使 用 表现 性 属性 bgcolor 设置 主体 的 背景 
颜色 ;在 hl 和 h2 元 素 中 使 用 表现 性 属性 align 设置 标题 的 居中 对 齐 ; 在 p 元 素 中 使 用 表 
现 性 元 素 strong 定义 粗 体 文本 ; 在 hl 和 strong 元 素 中 使 用 表现 性 元 素 font 及 其 表现 性 属 
性 color 定义 文本 的 颜色 …… 所 有 这 些 ， 都 是 “表现 ”的 作用 ， 并 且 使 不 同 结构 ( 即 标题 、 
作者 、 正 文 和 简 析 ) 中 的 文本 内 容 在 网 页 中 产生 特定 的 视觉 效果 。 图 5-1 为 上 述 HTML 代 
码 在 正 浏览 器 中 展示 出 的 视觉 效果 。 

有 内容、 结构 和 表现 Microsoft internet Explorer 


文件 E) 编辑 E) 查看 (V) 收藏 个) 工具 中 帮助 
地 址 (0) 从 ] E\Web Page\exercise\ch055-1 htm 


静夜 思 


唐 . 李白 


床 前 明月 光 ， 疑 是 地 上 需 。 
举 头 望 明 月 ， 低 头 思 故 乡 。 


【 简 析 】 这 是 写 远 客 : A 诗 以 明白 如 话 的 语言 肚 环 出 明 静 醉人 
意境 。 的 新 颖 奇特 ， 也 据 齐 了 辞 谍 的 





真 ， 那么 动人 ， 百 读 不 天 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 古 今 ”。 
Bl 最 我 的 电 议 


图 5-1 内 容 、 结 构 和 表现 
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有 关 网 页 的 内 容 、 结 构 和 表现 ， 可 以 作 如 下 比喻 : 内 容 好 比 一 个 模特 的 整个 身体 ， 
结构 好 比 将 模特 的 整个 身体 分 解 为 头 部 、 上 肢 、 躯 干 、 下 肢 和 脚 部 等 各 个 部 位 ， 表 现 则 是 
头饰 、 化 妆 、 服 装 和 时 尚 鞋 ， 将 模特 打扮 得 漂 漂 亮 亮 。 

在 【 例 5-1】HTML 代码 中 ， 既 包括 文本 内 容 ， 又 包含 对 网 页 及 其 内 容 进 行 结构 化 的 
html、head、body、hl、h2 和 p 等 结构 性 元 素 ， 还 包括 strong 和 font 表现 性 元 素 以 及 
bgcolor 和 align 表现 性 属性 。 所 以 ， 在 【 例 S-1】HIML 代码 中 ， 既 包括 内 容 和 结构 ， 又 包 
括 表现 。 

然而 ，HTML 4.01 规范 以 及 Web 标准 网 页 更 加 推荐 “内 容 和 结构 与 表现 的 分 离 ” 一 一 
“内 容 和 结构 ”出 现在 HTML 文档 中 ，“ 表 现 ” 的 定义 则 保存 在 CSS 文档 中 。 


二 HTML 规范 及 文档 类 型 定义 


在 HIML 问世 的 最 初 几 年 中 ，HTML 的 应 用 非常 缺乏 规范 性 。 不 同 Web 浏览 器 (如 
Netscape Navigator 和 Internet Explorer) 使 用 的 HTML 元 素 或 属性 不 尽 相 同 。 即 使 是 使 用 
相同 的 元 素 或 属性 ， 其 用 法 也 可 能 存在 较 大 差异 。 为 了 规范 HTML 的 应 用 ，W3C 于 1999 
年 制定 了 HTML 4.01 规范 (HTML 4.01 Specification) 。 

在 HIML 4.01 规范 中 ，HTML 文档 主要 分 为 严格 (Strict) 和 过 渡 〈Transitional) 两 种 
子 类 型 。 在 Strict 类 型 的 HTML 文档 中 ， 不 能 使 用 表现 性 元 素 和 表现 性 属性 ， 而 使 用 样式 
实现 表现 。 而 在 Transitional 类 型 的 HTML 文档 中 ， 还 允许 使 用 表现 性 元 素 和 表现 性 
属性 。 

为 了 声明 Transitional 类 型 的 HTML 文档 ， 需 要 在 HTML 文档 的 第 1 行 中 使 用 如 下 
代码 ; 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.o0rg/TR/html4/1lo0se.dtd"> 


该 行 代码 称 为 文档 类 型 定义 (Document Type Definition，DTD) ， 声 明 HTML 文档 属 
于 Transitional 类 型 。 

如 要 声明 Strict 类 型 的 HTML 文档 ， 则 需 在 HTML 文档 的 第 1 行 中 使 用 如 下 的 DTD 
代码 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3 .org/TR/htm1l4/strict.dtd"> 


在 Strict 类 型 的 HIML 文档 中 ， 不 能 使 用 如 下 元 素 : applet、basefont、center、dir、 
font、iframe、isindex、iframe、menu、s、strike 和 mu。 

此 外 ， 在 Strict 类 型 的 HIML 文档 中 ， 也 不 能 使 用 表现 性 属性 。 表 5-1 列 出 了 不 能 
相关 元 素 中 使 用 的 部 分 属性 。 
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表 5-1 不 能 在 相关 元 素 中 使 用 的 部 分 表现 性 属性 


属 性 名 相关 元 素 








align | hl、 h2、 h3、 h4、 h5、h6、p、table、caption、tr、 也 、td 和 img 
background body 
bgcolor body、table、tr、 也 和 td 


5.2.1 Transitional 类 型 的 HTML 文档 的 基本 要 求 


【 例 $-2】 将 【 例 5-1】 的 HTML 文档 改写 为 Transitional 类 型 的 HIML 文档 。HTML 
代码 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.o0rg/TR/html4/lo0se.dtd"> 
<html> 
<head> 
<title>Transitional 类 型 的 HTML 文档 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</head> 
<body bgcolor=Silver> 
<hl align=center><font color=red> 静 夜 思 </font></h1> 
<h2 align=center> 唐 .李白 </h2> 
<p align=center><strong><font color=blue> 床 前 明月 光 ， 疑 是 地 上 和 霜 。<br> 
举 头 望 明 月 ， 低 头 思 故 乡 。</font></strong></p> 
<p>【 简 析 】 这 是 写 远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 
它 不 追求 想象 的 新 颖 奇特 ， 也 据 弃 了 辞 洗 的 精工 华美 ， 它 以 清新 朴素 的 笔 乔 ， 抒 写 了 丰富 深 曲 的 内 容 。 
境 是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 古今 "。</P> 
</body> 
</html> 


Transitional 类 型 的 HTML 文档 的 基本 要 求 如 下 : 
(1) 在 第 1 行 中 使 用 如 下 代码 声明 Transitional 类 型 的 HTML 文档 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.0rg/TR/html4/lo0se.dtd"> 





(2) html 元 素 必须 包含 head 和 body 两 个 子 元 素 ，head 元 素 必须 包含 tile 和 meta 两 
个 子 元 素 。 

(3) 在 HTML 文档 头 部 使 用 meta 元 素 将 编码 方式 设置 为 中 文 简体 ， 具 体 使 用 如 下 
代码 : 


<meta http-equiv="content-type" content="text/html; charset=gb2312"> 


该 段 代码 表示 ， 网 页 的 内 容 类 型 是 text 或 html 格式 ， 并 使 用 gb2312 字符 集 ，gb2312 
是 简体 中 文 编码 方式 。 这 样 ， 可 以 避免 在 Web 浏览 器 中 显示 乱码 。 
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5.2.2”W3C 标记 验证 服务 


一 个 语法 规范 的 HIML 文档 即 可 称 为 有 效 的 。 有 效 的 HTML 文档 易于 被 Web 浏览 器 
识别 和 处 理 。W3C 网 站 在 线 提供 HTML 文档 的 标记 验证 服务 (Markup Validation 
Service) 。 标 记 验 证 服务 不 仅 能 够 验证 HTML 文档 是 否 符合 语法 规范 ， 而 且 能 够 发 现 
HIML 文档 中 违反 语法 规范 的 代码 。 

【 例 $-3】 使 用 W3C 标记 验证 服务 。 具 体 步骤 如 下 ; 

(1) 上 传 并 验证 HIML 文档 。 在 正 浏览 器 的 地 址 栏 中 输入 如 下 URL : 
http://validator.w3.org/#validate_by_upload， 可 以 打开 W3C 网 站 的 Markup Validation Service 
网 页 。 如 图 5-2 所 示 ， 在 该 网 页 的 Validate by File Upload 选项 卡 中 单 击 “ 浏 览 ” 按 钮 ， 通 
过 打开 的 “选择 文件 ”对 话 框 在 本 地 计算 机 中 选 定 需要 验证 的 HIML 文档 。 然 后 ， 单 击 
Check 按钮 ， 即 可 将 选 定 的 HTML 文档 上 传 到 W3C 网 站 并 对 该 HTML 文档 进行 规范 性 
验证 。 








EB] The W3C Markup Validation Service - Microsoft Internet Explorer 
文件 E) ”编辑 E) 查看 (V) 收藏 A) 工具 (DD 才 助 (H) 
地 址 (D) | 篇) htpyvaidator w3.orgj#validate_by_upload ~ 苇 到 


Markup Validation Service 
Validate by URI Validate by Direct input 


Validate by File Upload 


Upload a document for validation: 


Fie: |=:\Web Pagevexercisevch05\5-2 -htm 


图 5-2 使 用 W3C 在 线 标记 验证 服务 


b More Options 





人 @ ntemet 


(2) 根据 错误 提示 修改 HTML 文档 。 如 图 5-3 所 示 ， 如 果 在 上 传 的 HIML 文档 中 存 
在 不 符合 语法 规范 的 代码 ，W3C 标记 验证 服务 会 给 出 相应 的 错误 提示 。 根 据 错误 提示 ， 
使 用 Notepad 软件 修改 HTML 文档 中 的 相应 代码 。 
(3) 重新 上 传 并 验证 HTML 文档 。 如 图 5-4 所 示 ， 如 果 修 改 后 的 HIML 文档 不 存在 
违反 语法 规范 的 代码 ，W3C 标记 验证 服务 会 给 出 验证 通过 提示 。 























注意 : W3C 标记 验证 服务 是 根据 所 上 传 文件 中 的 DTD 验证 HIML 文档 的 。 只 有 将 正 
确 的 DTD 代码 插入 HTML 文档 的 首 行 ，HTML 文档 才 有 可 能 通过 验证 。 
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E [invalid] Markup Validation of ENWeb Pageexerciseich05,5-2.htmi - W3C Markup Val- 
文件 E) ”编辑 EE) ”查看 (V) ” 收 毫 A) 工具 四 ”帮助 时 ) 
地 址 吕 ) 篇] httpyvaidator w3.org/check 
Validation Output: 1 Error 





@ Lne7 Column 9 end tag for “head™ which is not finished 


</head> 


Most lkely, you nested tags and ciosed them in the wrong order. For example <p><em>...</p> 到 
not acceptable, as <em> must be ciosed before <p>. Acceptabie nesting is: <p><em>...</em></p> 


Another possibilty is that you used an elerment which requires 3 chid element that you did not 
include. Hence the parent element is "not finished ，not complete. For instance, in HTML the 
<head> element must contain 3 <titie> chid element, lists reqvire appropriate fist items (<u> and 
<ob require <b>; <d> requires <dt> and <dd>), and so on 


皮 Intemet 


E [valid] Markup Validation of EWWeb Pagevexerciseich05\5-2htm - W3C Markup Validator - Microsoft internet Explorer 
文件 E) ”编辑 E) ”查看 (V) ”收藏 把) 工具 四 ”帮助 册 ) 
地 址 吕 ) 入 | ntpyvaidator w3 org/check 


Jump To: Congratulations - Icons 


This document was successfully checked as HTML 4.01 Transitional! 


Result: 





EE 
File: 
Use the file selection box above if you wish to re-validate the uploaded file E\Web Page\exerciseich05\5-2 htm 


gb2312 (detect automatically) 


HTML 4.01 Transitional (detect automatically) 


HTML 
人 ntemet 





图 5-4 验证 通过 提示 


5.2.3 ”使 用 Dreamweaver 验证 HTML 文档 的 语法 规范 性 


与 W3C 标记 验证 服务 类 似 ， 使 用 Dreamweaver 也 可 以 验证 HTML 文档 是 否 符 合 语 法 
规范 ， 而 且 能 够 发 现 HIML 文档 中 违反 语法 规范 的 代码 。 具 体 步 骤 如 下 : 

使 用 Dreamweaver 打开 HTML 文档 ， 在 菜单 栏 中 选择 “文件 ”|“ 检 查 页 ”|“ 验 证 标 
记 ” 命 令 ， 即 可 验证 HIML 标记 及 HIML 文档 的 语法 规范 性 。 

如 图 5-5 所 示 ， 在 Dreamweaver 窗口 下 方 的 “结果 ” 窗 格 的 “验证 ”选项 卡 中 ， 可 以 
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显示 验证 结果 。 也 可 以 根据 验证 结果 中 的 错误 提示 ， 修 改 HTML 文档 中 的 相应 代码 。 


O Nacronedia Dreanveaver 8 — [E:\¥eb Page\exercise\ch05\ex-5-1.hta] 加 回回 
文件 FE) 编辑 人 E) 查看 WW) 插入 CI) 修改 虽 文本 CI) 命令 CE) 站点) 窗口 鸣 帮助 0 

a) 
人 


《1DOCTYPE HINL PUBLIC“-/7W5C77DTD HT 4.01//EN™ 
“http://www. w3. org/TR/htnl4d/strict. dtd > 
<htnl> 
head> 
《tit1le> 内 容 、 结 构 和 表现 </title> 
《meta http-equiv="content-type” content="text/htnl; charset=gb2312"> 
/head> 
body bgcolor=Silver> 
hl align=center><font color=re 必 葡 夜 因 </font>Chl> 
<《h? alien=renter) 唐 栓 向 《 











在 JINL 4.0 中 ， 已 不 帝 成 使 用 FONT。 它 可 能 会 在 格 来 版 本 中 谨 弃 ,请 考虑 改 用 样式 表 。[ITWL 4.0] 
在 JIML 4.0 中 ,已 不 赞成 使 用 FONT。 它 可 能 会 在 格 来 版 本 中 庚 弃 ,请 考虑 改 用 样式 表 。[HTHL 4.0] 





图 5-5 使 用 Dreamweaver 验证 HTML 文档 的 语法 规范 性 


如 图 5-5 所 示 ， 在 “验证 ”选项 卡 左 侧 的 弹出 菜单 中 选择 “验证 当前 文档 ”命令 ， 同 
样 可 以 验证 HTML 标记 及 HTML 文档 的 语法 规范 性 。 


.3 内 部 样式 表 


“内 容 和 结构 与 表现 的 分 离 ” 是 Web 标准 网 页 设计 与 制作 的 主要 目标 之 一 。 在 Strict 
类 型 的 HTML 文档 中 ， 内 容 在 网 页 中 的 表现 是 通过 样式 〈Style) 实现 的 。 在 Strict 类 型 的 
HTML 文档 头 部 使 用 style 元 素 定 义 内 部 样式 表 (Internal Style Sheet) 是 实现 样式 的 方法 
Re 

一 个 样式 表 通 常 包含 多 条 CSS 规则 (Rule) 。 每 条 CSS 规则 主要 由 两 个 部 分 构成 : 选 
择 器 (Selector) ， 以 及 一 个 或 多 个 特性 声明 (Property Declaration) 。 特 性 声明 之 间 用 分 
号 (;) 隔 开 。 定 义 一 条 CSS 规则 的 基本 语法 如 下 : 

selector { property declarationl; property declaration2; … } 

在 一 条 CSS 规则 中 ， 每 个 特性 声明 又 由 一 个 特性 名 称 (Property Name) 和 一 个 特性 值 
(Property Value) 组 成 ， 特 性 名 称 和 特性 值 用 冒号 〈:) 隔 开 。 因 此 ， 定 义 一 条 CSS 规则 的 
基本 语法 又 可 以 进一步 表示 如 下 : 

selector { property namel:property valuel; property name2:property value2; … } 


在 一 条 CSS 规则 中 ， 选 择 器 用 于 匹配 HTML 文档 中 需要 进行 样式 控制 的 元 素 。 实 现 
样式 的 选择 器 又 可 进一步 分 为 类 型 选择 器 、 类 选择 器 、ID 选择 器 、 后 代 选 择 器 和 子 元 素 
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选择 器 等 。 
5.3.1 ”类 型 选择 器 


在 样式 表 的 CSS 规则 中 ， 最 常见 的 选择 器 是 类 型 选择 器 (Type Selectors) ， 在 
Dreamweaver 中 又 称 标签 选择 器 。 类 型 选择 器 用 于 匹配 需要 重新 设 定 样式 的 HIML 元 素 。 

例如 ， 为 了 将 一 级 标题 中 文本 的 水 平 对 齐 方式 〈textralign) 设置 为 居中 〈center)， 同 
时 将 文本 颜色 (color) 设置 为 红色 (Red) ， 可 以 定义 如 下 CSS 规则 : 

hl { text-align:center; color:Red } 

其 中 ，hl 是 类 型 选择 器 ， 用 于 匹配 HTML 文档 中 需要 重新 设 定 样式 的 hl 元 素 。 
text-align 和 color 是 特性 名 称 ，center 和 Red 是 对 应 的 特性 值 。 

图 5-6 说 明了 该 条 CSS 规则 的 结构 。 





图 5-6 CSS 规则 的 结构 


又 如 ， 为 了 将 网 页 的 背景 颜色 (background-color) 设置 为 银色 (Silver) ， 可 以 定义 
如 下 CSS 规则 : 


body { background-color:Silver } 


5.3.2 ”类 选择 器 


在 样式 表 的 CSS 规则 中 ， 还 可 以 使 用 句号 〈.) 定义 类 选择 器 (Class Selectors) 。 
例如 ， 为 了 将 段落 中 文本 的 水 平 对 齐 方式 设置 为 居中 ， 将 文本 颜色 设置 为 蓝 色 ， 并 且 
加 粗 文 本 ， 可 以 首先 定义 如 下 CSS 规则 : 


.Zhengwen { text-align:center; color:blue; font-weight:bolder } 


其 中 ，.zhengwen 是 类 选择 器 ， 用 于 匹配 HTML 文档 主体 中 class 属性 值 为 zhengwen 
的 元 素 。 font-weight 特性 用 来 设置 文本 的 粗细 ， 对 应 的 特性 值 可 以 是 lighter、normal、 
bold 或 bolder， 对 应 的 文本 将 依次 从 细 变 粗 。 

然后 ， 在 HIML 文档 主体 使 用 以 下 代码 : 

<p class="zhengwen"> 床 前 明月 光 ， 疑 是 地 上 霜 。<br> 

举 头 望 明月 ， 低 头 思 故乡 。</p> 

即 可 将 段落 中 文本 的 水 平 对 齐 方式 设置 为 居中 、 将 文本 颜色 设置 为 蓝 色 、 并 且 加 粗 
文本 。 
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【 例 5-4】 在 Strict 类 型 的 HTML 文档 中 使 用 内 部 样式 表 实现 [ 例 5-2] 中 的 表现 。HTML 
代码 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.0rg/TR/html4/strict.dtd"> 
<html> 
<head> 
<title> 内 部 样式 表 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
body { background-color:Silver } 
hl { text-align:center; color:Red } 
h2 { text-align:center } 
.Zzhengwen { text-align:center; color:Blue; font-weight:bolder } 
</style> 
</head> 
<body> 
<h1> 静 夜 思 </h1l> 
<h2> 唐 .李白 </h2> 
<p class="zhengwen"> 床 前 明月 光 ， 疑 是 地 上 霜 。<br> 
举 头 望 明 月 ， 低 头 思 故 乡 。</P> 
<p>【 简 析 】 这 是 写 远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 
它 不 追求 想象 的 新 颖 奇特 ， 也 握 弃 了 秤 汇 的 精工 华美 ， 它 以 清新 朴素 的 笔触 ， 打 写 了 丰富 深 曲 的 内 容 。 
境 是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 古 今 ”。</p> 
</body> 
</html> 
注意 ， 
@ 定义 内 部 样式 表 ， 需 要 在 HTML 文档 头 部 使 用 style 元 素 。 然 后 ， 在 style 元 素 的 
开始 标签 中 使 用 type 属性 ， 并 将 type 属性 值 设 置 为 text/css。 
@ 在 内 部 样式 表 中 定义 了 三 个 类 型 选择 器 body、hl 和 h2， 这 三 个 类 型 选择 器 分 别 匹 
配 HIML 文档 中 的 body、hl 和 h2 元 素 。 因 此 ， 网 页 的 背景 颜色 “表现 ”为 银色 ; 一 级 标 
题 中 的 文本 (静夜 思 ) “表现 ”为 水 平 居中 和 红色 ; 二 级 标题 中 的 文本 ( 唐 . 李 白 ) 则 “ 表 
现 ” 为 水 平 居中 。 
@ 在 内 部 样式 表 的 第 4 条 CSS 规则 中 还 定义 了 一 个 类 选择 器 ( .zhengwen ) ; 另 一 方 
面 ， 在 HIML 文档 主体 中 ， 第 1 个 p 元 素 的 class 属性 值 是 zhengwen。 因 此 ,第 1 个 p 元 
素 会 应 用 第 4 条 CSS 规则 定义 的 样式 。 这 样 ， 第 1 个 P 元 素 中 的 文本 就 将 “表现 ”为 水 平 
居中 、 蓝 色 和 粗 体 。 
@ 在 HIML 文档 主体 中 ， 第 2 个 p 元 素 没有 使 用 class 属性 。 因 此 ， 第 2 个 p 元 素 不 
会 应 用 第 4 条 CSS 规则 定义 的 样式 。 这 样 ， 第 2 个 p 元 素 中 的 文本 颜色 是 默认 的 黑色 。 
@ 在 Strict 类 型 的 HIML 文 档 中 ， 不 能 使 用 表现 性 元 素 和 表现 性 属性 ， 只 能 “通过 样 
式 实 现 内 容 的 表现 ”。 
@ 上 述 Strict 类 型 的 HIML 文档 在 一 定 程度 上 实现 了 “内 容 和 结构 与 表现 的 分 离 ” 
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一 一 “内 容 和 结构 ”出 现在 HTML 文档 主体 ，“ 表 现 ”( 即 内 部 样式 表 ) 则 定义 在 HTML 


5.3.3 ID 选择 器 


了 D 选择 器 (ID Selectors) 的 定义 和 用 法 与 类 选择 器 基本 相同 ， 但 在 一 个 HTML 文档 
中 DD 选择 器 及 其 实现 的 样式 只 能 被 一 个 元 素 应 用 一 次 。 而 类 选择 器 及 其 实现 的 样式 在 一 
个 HTML 文档 中 可 以 应 用 于 多 个 元 素 。 因 此 ，ID 选择 器 的 针对 性 更 强 。 

在 样式 表 的 CSS 规则 中 ， 可 以 使 用 井 号 〈#) 定义 ID 选择 器 。 

例如 ， 为 了 将 段落 中 的 文本 颜色 设置 为 绿色 ， 可 以 首先 在 HIML 文档 头 部 的 style 元 
素 中 定义 如 下 CSS 规则 : 


#two { color:Green } 


其 中 ，#two 是 ID 选择 器 ， 用 于 匹配 HIML 文档 主体 中 id 属性 值 为 two 的 元 素 。 然 后 ， 在 
HTML 文档 主体 使 用 以 下 代码 : 
<p id="two">ID 选择 器 2</p> 
即 可 使 该 p 元 素 中 的 文本 (ID 选择 器 2) “表现 ”为 绿色 。 
【 例 $-$】 定义 和 应 用 ID 选择 器 。HTML 代码 如 下 : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.o0rg/TR/html4/strict.dtd"> 
<html> 
<head> 


<title>ID 选择 器 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 





<style type="text/css"> 
#one { color:Red } 
#two { color:Green } 
</style> 
</head> 
<body> 
<p id="one">ID 选择 器 1</p> 
<p id="two">ID 选择 器 2</p> 
</body> 
</html> 


在 该 HTML 文档 主体 ， 第 1 个 p 元 素 的 id 属性 值 是 one。 因 此 ， 第 1 个 p 元素 会 应 用 
与 D 选择 器 (#one) 匹配 的 样式 。 所 以 ， 第 1 个 p 元 素 中 的 文本 (ID 选择 器 1) 会 “ 表 
现 ” 为 红色 。 

同 理 ， 第 2 个 p 元 素 中 的 文本 (ID 选择 器 2) 会 “表现 ”为 绿色 。 
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注意 : 
@ ID 选择 器 的 定义 以 井 号 (#) 开头 ， 且 id 名 称 的 第 1 个 字符 不 能 为 数字 ， 而 建议 
使 用 字母 。 


@ 在 一 个 HTML 文 档 中 ， 元素 的 id 属 性 值 具有 唯一 性 。 因 此 ， 在 一 个 HTML 文 档 中 
ID 选择 器 及 其 实现 的 样式 只 能 被 一 个 元 素 应 用 一 次 。 例 如 ， 在 上 述 HTML 文档 主体 ， 只 
能 有 一 个 元 素 的 id 属性 值 是 one， 而 其 他 任何 元 素 的 id 属性 值 都 不 能 再 是 one。 


5.3.4 ”后 代 选 择 器 


在 CSS 规则 中 ， 还 可 以 定义 后 代 选 择 器 (Descendant Selectors) 。 这 样 ，CSS 规则 及 
其 样式 能 够 对 某 些 HTML 元 素 的 后 代 元 素 起 作用 。 

例如 ， 如 果 希 望 只 对 hl 元 素 中 的 em 元素 应 用 特定 样式 ， 则 可 以 创建 如 下 CSS 规则 : 

hl em { color:red } 

该 CSS 规则 有 两 个 选择 器 : 前 一 个 是 hl， 后 一 个 是 em， 选择 器 之 间 用 空格 阳 开 (也 
可 以 理解 为 前 后 两 个 选择 器 用 空格 结合 在 一 起 ) 。 该 CSS 规则 及 其 样式 会 把 作为 hl 元 素 
后 代 的 em 元 素 中 的 文本 变 为 红色 ， 但 对 其 他 的 em 元 素 及 其 中 的 文本 则 不 起 作用 。 

在 后 代 选 择 器 中 ， 选 择 器 之 间 的 空格 称 为 后 代 结合 符 (Descendant Combinator) 。 后 


代 结 合 符 可 以 解释 为 “作为 …… 后 代 的 ……”。 因 此 ， 后 代 选 择 器 (hl em) 可 以 解释 为 
“作为 hl 元 素 后 代 的 任何 em 元 素 将 应 用 以 下 样式 ……”。 


【 例 $S-6】 后 代 选 择 器 及 其 应 用 示例 。HTML 代码 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.0rg/TR/html4/strict.dtd"> 
<html> 
<head> 
<title> 后 代 选 择 器 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
hl em { color:red } 
.Cl em { color:blue } 
</style> 
</head> 
<body> 
<hl>This is an <em>important</em> heading.</h1> 
<hl>This is an <strong><em>important</em></strong> heading.</h1> 
<p class="cl">This is an <em>important</em> paragraph.</p> 
<p>This is an <em>important</em> paragraph.</p> 
</body> 
</html> 


在 该 HIML 文档 主体 ， 第 1 个 和 第 2 个 em 元 素 都 是 hl 元 素 的 后 代 元 素 。 所 以 ， 这 
两 个 em 元 素 都 将 应 用 样式 表 中 的 第 1 条 CSS 规则 (hl em { colorred }) ， 其 中 的 文本 
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(important) 都 将 显示 为 红色 。 

第 3 个 em 元素 是 cl 类 p 元 素 的 后 代 元 素 。 因 此 ， 第 3 个 em 元 素 将 应 用 样式 表 中 的 
第 2 条 CSS 规则 (.cl em { colorblue }) ， 其 中 的 文本 (important) 将 显示 为 蓝 色 。 

第 4 个 em 元 素 只 是 p 元素 的 后 代 元 素 。 这 样 ， 第 4 个 em 元素 不 会 应 用 样式 表 中 的 任 
何 一 条 CSS 规则 ， 其 中 的 文本 (important) 将 显示 为 默认 色 ， 即 黑色 。 


注意 : 有 关 后 代 选 择 器 有 一 个 容易 被 忽视 的 情况 ， 即 两 个 元 素 之 间 的 谋 套 可 以 是 多 
层 的 。 例 如 ， 在 该 HTML 文档 主体 ， 虽 然 第 2 个 em 元 素 不 是 hl 元 素 的 子 元 素 ， 但 由 于 
第 2 个 em 元 素 是 strong 元 素 的 子 元 素 ，strong 元 素 又 是 hl 元 素 的 子 元 素 ， 因 此 ， 第 2 个 
em 元 素 是 hl 元 素 的 后 代 元 素 ， 这 样 就 会 应 用 第 1 条 CSS 规则 (hl em { colorred } ) 。 


5.3.5” 子 元 素 选 择 器 


在 CSS 规则 中 ， 还 可 以 定义 子 元 素 选择 器 (Child Selectors) 。 这 样 ，CSS 规则 及 其 样 
式 能 够 对 某 些 HTML 元 素 的 特定 子 元 素 起 作用 。 子 元 素 选择 器 的 定义 使 用 大 于 号 (>) 。 
例如 ， 在 样式 表 中 定义 如 下 CSS 规则 及 子 元 素 选择 器 : 


hl>strong { color:red } 
其 中 ，hl>strong 即 是 子 元 素 选择 器 ， 表 示 hl 元 素 与 strong 元 素 是 父 元 素 与 子 元 素 的 关 
系 。 其 中 的 大 于 号 (>) 称 为 子 元 素 结合 符 (Child Combinator) 。 
对 应 以 上 一 条 CSS 规则 及 子 元 素 选 择 器 ， 假 设 在 HTML 文档 主体 中 有 如 下 代码 : 
<hl>This is <strong>very</strong> important!</hl> 
<hl>This is <em>really <strong>very</strong></em> important!</h1l> 


其 中 ， 第 1 行 中 的 strong 元 素 是 hl 元 素 的 子 元 素 。 所 以 ， 第 1 行 中 的 strong 元 素 会 应 用 
上 述 子 元 素 选择 器 (hl>strong) 及 其 后 面 的 样式 。 因 此 ， 在 Web 浏览 器 中 第 1 行 中 的 very 
会 显示 为 红色 。 

但 是 ， 第 2 行 中 的 strong 元 素 只 是 hl 元 素 的 后 代 元 素 ， 并 不 是 hl 元 素 的 子 元 素 。 所 
以 ， 第 2 行 中 的 strong 元 素 不 会 应 用 上 述 子 元 素 选 择 器 (hl>strong) 及 其 后 面 的 样式 。 因 
此 ， 在 Web 浏览 器 中 第 2 行 中 的 very 不 会 显示 为 红色 。 


5.3.6 伪 类 


在 CSS 中 ， 伪 类 (Pseudo-Classes) 能 够 细 化 或 丰富 选择 器 的 分 类 。 通 常情 况 下 ， 伪 
类 用 冒号 (:) 及 其 后 的 伪 类 名 表示 ， 并 且 跟 在 类 型 选择 器 、 类 选择 器 后 面 。 

例如 , 在 类 型 选择 器 a 后 面 使 用 :link、:visited、:hover 和 :active 四 个 伪 类 , 可 以 定义 文 
本 超 链 接 的 不 同 状态 一 一 link (未 被 访问 的 超 链接 ) 、visited (已 被 访问 的 超 链接 ) 、hover 
(鼠标 悬 停 在 超 链 接 上 ) 和 active (被 激活 的 超 链接 ) 。 

默认 情况 下 ， 未 被 访问 的 文本 超 链接 是 蓝 色 的 并 且 有 下 画 线 ， 已 被 访问 的 文本 超 链 
接 则 是 紫色 的 并 且 有 下 画 线 。 但 在 类 型 选择 器 a 后 面 使 用 :link、:visited、:hover 和 :active 
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四 个 伪 类 ， 可 以 重新 定义 动态 的 文本 超 链接 。 这 样 ， 在 不 同 状态 下， 文本 超 链接 可 以 有 更 
丰富 的 表现 。 
【 例 5-7】 使 用 伪 类 重新 定义 动态 的 文本 超 链接 。HTML 代码 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.-w3 .org/TR/htm1l4/strict.dtd"> 
<html> 
<head> 
<title> 伪 类 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
a { text-decoration:none } 
a:link { color:Red } 
a:visited { color:Gray } 
a:hover { color:Green } 
a:active { color:Blue } 
</style> 
</head> 
<body> 
<p><a href="http://www.sina.com"> 创 建 指 向 新 浪 网 的 超 链接 </a></p> 
</body> 
</html> 


注意 : 

@ 在 样式 表 中 定义 伪 类 时 ， 必 须 明 确 指定 类 型 选择 器 或 类 选择 器 ， 而 且 选 择 器 和 伪 
类 名 之 间 必 须 用 冒号 (:) 隔 开 。 

@@ 在 上 述 样式 表 中 ，CSS 规则 a { text-decoration:none } 使 文本 超 链 接 没有 任何 修 
饰 ， 当 然 也 没有 下 画 线 。 

图 在 类 型 选择 器 a 后 面 使 用 :link、:visited、:hover 和 :active 四 个 伪 类 定义 CSS 规则 
时 ， 必 须 遵循 LVHA 的 顺序 ， 即 a:link 一 a:visited 一 a:hover 一 a:active 的 顺序 。 否则 ， 
文本 超 链接 的 鼠标 悬 停 和 被 激活 样式 将 不 起 作用 。 


5.3.7 ”选择 器 分 组 


如 果 几 个 选择 器 后 面 的 特性 声明 相同 ， 则 可 以 在 样式 表 中 对 选择 器 分 组 (Grouping) 。 
这 样 ， 可 以 简化 特性 声明 相同 的 CSS 规则 定义 。 

例如 ， 有 以 下 三 条 CSS 规则 : 

hl { text-align:center; font-family:sans-serif; color:green } 

h2 { text-align:center; font-family:sans-serif; color:green } 

h3 { text-align:center; font-family:sans-serif; color:green } 
其 中 ，hl、h2 和 bh3 三 个 类 型 选择 器 后 面 的 特性 声明 相同 。 

如 果 对 上 述 hl、h2 和 h3 三 个 类 型 选择 器 分 组 ， 则 可 以 将 上 述 三 条 CSS 规则 改写 为 如 
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下 的 一 条 CSS 规则 : 
hl, h2, h3 { text-align:center; font-family:sans-serif; color:green } 


此 可 见 ， 在 几 个 选择 器 后 面 的 特性 声明 相同 时 ， 使 用 选择 器 分 组 可 以 大 大 简化 CSS 
规则 的 定义 。 


注意 : 在 定义 选择 器 分 组 时 ， 选 择 器 之 间 用 过 号 (,) 隔 开 。 

















6.4 常用 的 样式 特性 





根据 CSS 规则 中 特性 的 作用 对 象 及 作用 方式 ， 可 以 将 样式 特性 分 为 类 型 、 背 景 、 区 
块 、 方 框 、 边 框 、 列 表 、 定 位 和 扩展 等 几 个 大 类 。 这 里 ， 首 先 介绍 前 三 类 常用 的 样式 


5.4.1 ”类 型 特性 











类 型 特性 用 来 对 网 页 中 文本 的 字体 系列 (font-family) 、 大 小 (font-size ) 、 粗 细 
(font-weight)、 样 式 (font-style)、 行 高 (line-height) 、 修 饰 (text-decoration) 和 颜色 (color) 
等 特性 进行 设置 。 

1. 字体 系列 (font-family) 

该 特性 用 于 设置 文本 的 字体 系列 。CSS 2.1 定义 了 Serif、Sans-serif、Cursive、Fantasy 
和 Monospace 五 种 通用 字体 系列 。 每 种 字体 系列 又 包含 若干 字体 。 例 如 ，Serif 字 体系 列 包 
括 Times、Georgia 和 New Century Schoolbook 等 字体 。 也 可 以 使 用 如 下 代码 设置 相应 的 中 
文字 体 : STHeiti (华文 黑体 )、STKaiti 华文 楷体 )、STSong (华文 宋体 )、STFangsong 
(华文 仿宋 )。 但 如 果 系 统 没 有 安装 相应 的 字体 ，Web 浏览 器 就 只 能 使 用 默认 字体 来 显示 
文本 。 

2. 大 小 (font-size) 

该 特性 用 于 设置 文本 的 字体 大 小 。font-size 特性 值 通常 是 以 px (像素 ) 和 em (字体 高 
度 ) 为 单位 的 相对 值 。 其 中 ，em 是 相对 于 当前 文本 大 小 的 宽度 单位 ( 即 font-size 值 ) ， 如 
果 当 前 的 font-size 特性 值 为 1 6px， 则 lem=16px。 

3. 粗细 (font-weight) 

该 特性 用 于 设置 文本 的 字体 粗细 。font-weight 特性 值 可 以 是 lighter、normal、bold 或 
bolder， 这 些 特 性 值 将 使 文本 的 字体 依次 由 细 变 粗 。 

4. 字体 样式 (font-style) 

该 特性 用 于 设置 文本 的 字体 样式 。font-style 特性 值 可 以 是 normal (正常 》、italic 斜 
体 ) 或 oblique (倾斜 〉。 

5. 行 高 (line-height) 

该 特性 用 于 设置 文本 所 在 行 的 高 度 。 该 特性 作用 于 一 个 块 级 元 素 时 ， 定 义 了 该 元 素 
中 基线 之 间 的 最 小 距离 。line-height 特性 值 通常 并 应 该 大 于 font-size 特性 值 。line-height 与 
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font-size 的 特性 值 之 差 一 分 为 二 ， pi 个 文本 行内 容 的 顶部 和 底 间 

line-height 特性 值 通常 是 一 个 百分数 ， 表示 基于 当前 字体 高 度 的 相对 值 。 例如 ， 
line-height: 140% 尖 寺 行商 中 当前 字体 商 诺 的 1.4 倍 。 此 时 ， 文 本 内 容 距 离 上 、 下 基线 的 
顶部 空间 和 底部 空间 均 是 当前 字体 高 度 的 0.2 倍 。 

6. 修饰 (text-decoration ) 

使 用 该 特性 ， 可 以 对 文本 添加 下 画 线 (underline) 、 上 画 线 〈overline) 、 删 除 线 
(line-through) ， 或 使 文本 闪烁 (blink) ， 也 可 以 不 加 任何 修饰 Cnone) 。 

7. 颜色 (color) 

该 特性 用 于 设置 文本 的 颜色 。 

color 特性 值 可 以 是 预先 定义 的 颜色 名 称 。 例 如 ，red( 红 ) 、yellow( 黄 ) 、blue( 蓝 )、 
silver( 银 ) 、teal ( 深 青 ) 、white〈 白 ) 、navy (深蓝 ) 、orchid ( 淡 紫 ) 、olive (橄榄 ) 、 
purple( 紫 ) 、gray ( 灰 ) 、green ( 绿 ) 、lime〈 浅 绿 ) 、maroon 〈 褐 ) 、aqua〈 水 绿 ) 和 
fuchsia (紫红 ) 。 

计算 机 显示 器 的 成 色 原理 是 由 红 (red) 、 绿 (green) 、 蓝 (blue) 三 色光 的 县 加 形成 
各 种 各 样 的 颜色 。 因 此 ，color 特性 值 也 可 以 是 rgb 代码 。 例 如 ，rgb(255,0,0) 对 应 红色 ， 
rgb(0.255.0) 对 应 绿色 ，rgb(0.0.255) 对 应 蓝 色 。 

color 特性 值 还 可 以 是 一 个 三 位 或 六 位 的 十 六 进 制 数 。 例 如 ，#f00 和 #ff0000 对 应 红 
色 ，#0f0 和 #00ff00 对 应 绿色 ，#00f 和 #0000 信 对 应 蓝 色 。 


5.4.2 ”背景 特性 
































背景 特性 主要 作用 于 body、table 和 div 等 结构 性 和 块 级 元 素 。 常 用 的 背景 特性 有 背景 
颜色 〈background-color) 和 背景 图 像 (background-image) 。 

1. 背景 颜色 (background-color) 

该 特性 用 于 设置 元 素 的 背景 颜色 。 与 color 特性 值 类 似 ，background-color 特性 值 可 以 
是 预先 定义 的 颜色 名 称 ， 也 可 以 是 rgb 代码 ， 还 可 以 是 一 个 三 位 或 六 位 的 十 六 进 制 数 。 此 
外 ，background-color 特性 的 默认 值 是 transparent， 表 示 背 景 是 透明 的 。 

2. 背景 图 像 (background-image) 

该 特性 用 于 设置 元 素 的 背景 图 像 。background-image 特性 值 是 一 个 指向 图 像 的 路 径 及 
文件 名 的 URL。 例 如 ，body { background-image:url("../images/bkImage.jpg") } 表 示 ， 将 当 
前 文档 所 在 文件 夹 的 上 一 级 文件 夹 的 下 一 级 文件 夹 images 中 的 图 像 文件 bkImage.jpg 设置 
ea 

.背景 图 像 重复 (background-repeat) 

pte ern 该 特性 的 默认 值 是 repeat， 表 示 背 景 图 像 
将 在 水 平方 向 和 垂直 方向 重复 。 该 特性 的 其 他 取 值 及 含义 如 下 : repeat-x 表示 背景 图 像 将 
在 水 下 方向 重复 ; repeat-y 表示 背景 图 像 将 在 垂直 方向 重复 ; no-repeat 表示 背景 图 像 仅 显 

一 
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5.4.3 ”区 块 特性 


区 块 特性 用 来 对 文本 中 的 单词 间距 (word-spacing) 、 字 符 间距 (letter-spacing) 、 垂 
直 对 齐 (vertical-align) 、 文 本 对 齐 (text-align) 、 文 本 缩 进 (text-indent) 和 显示 (display) 
等 特性 进行 设置 。 

1. 单词 间距 (word-spacing) 

该 特性 用 于 设置 单词 之 间 的 间隔 。word-spacing 特性 值 通常 是 表示 固定 宽度 的 值 ， 例 
如 16px、lem 和 2cm。 

2. 字符 间距 (letter-spacing) 

该 特性 用 于 设置 字符 或 字母 之 间 的 间隔 。letter-spacing 特性 值 通常 是 表示 固定 宽度 的 
值 ， 例 如 16px、lem 和 2cm。 

3. 垂直 对 齐 (vertical-align) 

该 特性 用 于 设置 文本 的 垂直 对 齐 方式 。vertical-align 特性 值 可 以 是 sub (下 标 ) 、super 
(上 标 ) 、top〈 顶 端 对 齐 ) 、middle 〈 垂 直 居中 ) 或 bottom 〈 底 端 对 齐 ) 。 

4. 文本 对 齐 (text-align) 

该 特性 用 于 设置 文本 的 水 平 对 齐 方式 。text-align 特性 值 可 以 是 left ( 左 对 齐 ) 、right 
( 右 对 齐 ) 、center (水平 居中 ) 或 justify (两 端 对 齐 )。 

5. 文本 缩 进 (text-indent) 

该 特性 用 于 设置 段落 的 首 行 缩 进 。text-indent 特性 值 通常 是 表示 固定 缩 进 宽度 的 值 ， 
例如 16px、lem 和 2cm。 

6. 显示 (display) 

该 特性 用 于 设置 是 否 显示 元 素 以 及 如 何 显示 元 素 。display 特性 值 可 以 是 inline、block 
或 none。 其 中 ，inline 表示 将 元 素 显示 为 行内 元 素 ， 行 内 元 素 的 前 后 没有 换行 ，block 表示 
将 元 素 显示 为 块 级 元 素 ， 块 级 元 素 的 前 后 带 有 换行 ， none 表示 不 显示 元 素 。 


外 .5\ 行内 样式 


在 HIML 元 素 的 开始 标签 中 使 用 style 属性 ， 可 以 定义 行内 样式 (Inline Style) ， 又 称 
内 联 样式 。 例 如 ， 


<hl style="text-align:center; color:red; letter-spacing:lem"> 静 夜 思 </hl1> 


这 样 ，hl 元 素 中 的 内 容 “ 静 夜 思 ” 在 网 页 中 的 “表现 ”如 下 : 水 平 对 齐 、 红 色 、 字 
符 间 隔 为 一 个 字符 的 宽度 。 
【 例 $-8】 使 用 行内 样式 改写 【 例 5-4】。HIML 代码 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.o0rg/TR/html4/strict.dtd"> 
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<html> 
<head> 
<title> 行 内 样式 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</head> 
<body style="background-color:Silver"> 
<hl style="text-align:center; color:Red; letter-spacing:1lem"> 静 夜 思 </hl> 
<h2 style="text-align:center"> 唐 .李白 </h2> 
<p style="text-align:center; color:Blue; font-weight:bolder"> 
床 前 明月 光 ， 疑 是 地 上 和 霜 。<br> 
举 头 望 明月 ， 低 头 思 故乡 。</p> 
<p>【 简 析 】 这 是 写 远 客 思 乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 
它 不 追求 想象 的 新 颖 奇特 ， 也 气 弃 了 酬 藻 的 精工 华美 ， 它 以 清新 朴素 的 笔 蚀 ， 打 写 了 丰富 深 曲 的 内 容 。 
境 是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 了 耐人寻味。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 古 今 ”。</p> 
</body> 
</html> 


注意 : 

@ 行内 样式 直接 定义 并 作用 在 单个 的 HTML 元 素 上 。 

@ 定义 行内 样式 所 使 用 的 style 属性 与 定义 内 部 样式 表 所 使 用 的 style 元 素 ， 是 两 个 不 
同 的 概念 。 前 者 出 现在 一 个 HTML 元 素 的 开始 标签 中 ， 后 者 则 出 现在 HTML 文档 头 部 ; 
前 者 是 一 个 HTML 元 素 的 属性 ， 后 者 本 身 就 是 一 个 HTML 元 素 。 


.6 外 部 样式 表 及 其 应 用 


虽然 在 HTML 文档 中 可 以 使 用 内 部 样式 表 或 行内 样式 ， 但 更 有 效 、 更 规范 的 方法 是 
将 样式 表 定 义 并 保存 在 单独 的 CSS 文档 中 。 定 义 并 保存 在 CSS 文档 中 的 样式 表 ， 称 为 外 
部 样式 表 (External Style Sheet) 。 

外 部 样式 表 堪 称 Web 网 页 设计 领域 的 一 个 重大 突破 。 使 用 外 部 样式 表 ， 网 站 开发 者 
和 网 页 设计 者 不 仅 能 够 为 HTML 元 素 定义 样式 ， 而 且 可 以 将 样式 灵活 地 应 用 于 任意 多 的 
页 面 中 。 如 需 对 网 页 色彩 或 文本 字体 进行 统一 的 调整 ， 只 需 修 改 CSS 文档 中 的 CSS 规则 
及 其 样式 ， 网 站 内 多 个 页 面 的 设计 风格 就 会 同时 自动 更 新 。 换 言 之 ， 通 过 在 CSS 文档 中 
定义 和 修改 样式 表 ， 外 部 样式 表 能 够 同时 控制 网 站 内 多 个 页 面 的 外 观 和 布局 。 


5.6.1 创建 外 部 样式 表 


外 部 样式 表 可 以 直接 在 文本 编辑 软件 (如 Notepad) 中 进行 创建 和 修改 ， 并 保存 在 CSS 
文档 中 。CSS 文档 是 扩展 名 为 .css 的 文本 文件 。 在 CSS 文档 中 ， 只 包含 定义 样式 的 CSS 
规则 。 
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5.6.2 ”W3C 在 线 CSS 验证 服务 


W3C 网 站 不 仅 在 线 提供 HTML 文档 的 标记 验证 服务 ， 而 且 在 线 提供 CSS 验证 服务 
(CSS Validation Service) 。 标 记 验 证 服务 不 仅 能 够 验证 HTML 文档 是 否 符合 语法 规范 ， 而 
且 能 够 发 现 HIML 文档 中 违反 语法 规范 的 代码 。 类 似 地 ，CSS 验证 服务 不 仅 能 够 验证 CSS 
文档 是 否 符合 语法 规范 ， 而 且 能 够 发 现 CSS 文档 中 违反 语法 规范 的 代码 。 

此 外 ，CSS 验 证 服务 也 能 够 验证 HIML 文档 中 的 内 部 样式 表 和 行内 样式 是 否 符合 语法 
规范 ， 而 且 能 够 发 现 内 部 样式 表 和 行内 样式 中 违反 语法 规范 的 代码 。 


5.6.3 在 HTML 文档 中 链接 外 部 样式 表 


在 HTML 文档 头 部 ， 可 以 使 用 link 元 素 链接 CSS 文档 及 其 中 的 样式 表 。link 元 素 的 具 
体 用 法 如 下 : 
<link rel="stylesheet" type="text/css" href="CSS 文档 路 径 及 文件 名 "> 


这 样 ，Web 浏览 器 会 从 CSS 文档 中 读 取 CSS 规则 ， 并 根据 CSS 规则 中 的 选择 器 匹配 
HTML 文档 中 的 元 素 ， 进 而 对 HTML 元 素 所 作用 的 内 容 应 用 相应 的 样式 。 

【 例 $-9】 使 用 外 部 样式 表 改写 【 例 5-4】。 具 体 步骤 如 下 : 

(1) 在 CSS 文档 中 创建 外 部 样式 表 。 使 用 Notepad 软件 编辑 如 下 代码 ， 并 将 以 下 代码 
保存 在 CSS 文档 〈5-9.css) 中 。 














body { background-color:Silver } 
hl { text-align:center; color:Red; letter-spacing:lem } 
h2 { text-align:center } 


.Zzhengwen { text-align:center; color:Blue; font-weight:bolder } 


(2) 验证 CSS 文档 的 规范 性 。 在 正 浏览 器 的 地 址 栏 中 输入 如 下 URL: http:// 
jigsaw.w3.org/css-validator/#validate_by_upload， 可 以 打开 W3C 网 站 的 “CSS 验证 服务 ”网 
页 。 如 图 5-7 所 示 ， 在 该 网 页 的 “通过 文件 上 传 ” 选 项 卡 中 单 击 “ 浏 览 ” 按 钮 ， 通 过 打开 
的 “选择 文件 ”对 话 框 在 本 地 计算 机 中 选 定 需要 验证 的 CSS 文档 〈5-9.css) 。 然 后 单 击 
Check 按钮 ， 即 可 将 选 定 的 CSS 文档 上 传 到 W3C 网 站 并 对 该 CSS 文档 进行 规范 性 验证 。 

如 果 在 上 传 的 CSS 文档 中 存在 不 符合 语法 规范 的 代码 ，CSS 验证 服务 会 给 出 相应 的 错 
误 提 示 。 根 据 错 误 提 示 ， 使 用 Notepad 软件 修改 CSS 文档 中 的 相应 代码 。 然 后 ， 重 新 上 传 
并 验证 CSS 文档 。 直 至 CSS 文档 不 存在 违反 语法 规范 的 代码 ， 此 时 CSS 验证 服务 会 给 出 
验证 通过 提示 。 

(3) 在 HTML 文档 头 部 使 用 link 元 素 链接 外 部 样式 表 。 使 用 Notepad 软件 编辑 如 下 
代码 ， 并 将 这 些 代码 保存 在 HIML 文档 〈5-9.htm) 中 。 
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W3C CSS 验证 服务 - Microsoft Internet Explorer 
文件 E) ”编辑 E) ”查看 (V) ” 收 诚 A) 工具 四 ”帮助 d) 
地 址 @) 御 http/jgsaw_w3.org/css-validatorivaldate_by_upload 
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通过 指定 URI 通过 文件 上 传 通过 直接 输入 


验证 上 传 文 件 
选择 需要 验证 的 文件 





本 地 Css 文件。 |E:\Reb Page\exercise\ch05\5-9-cs= 


更 多 选项 


Bntemet 





图 5-7 使 用 W3C 在 线 CSS 验证 服务 


<!DOCTYPE HTML PUBLIC "“-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.0rg/TR/html4/strict.dtd"> 
<html> 
<head> 
<title> 内 容 和 结构 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<link rel="stylesheet" type="text/css" href="5-9.css"> 
</head> 
<body> 
<h1> 静 夜 思 </h1> 
<h2> 唐 .李白 </h2> 
<p class="zhengwen"> 床 前 明月 光 ， 疑 是 地 上 霜 。<br> 
举 头 望 明 月 ， 低 头 思 故乡 。</P> 
<p>【 简 析 】 这 是 写 远 客 思 乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 
它 不 追求 想象 的 新 颖 奇特 ， 也 据 弃 了 辞 汇 的 精工 华美 ， 它 以 清新 朴素 的 笔触 ， 打 写 了 丰富 深 曲 的 内 容 。 
境 是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 古 今 ”。</p> 
</body> 
</html> 


注意 : 

@ 使 用 外 部 样式 表 ， 可 以 完美 地 实现 “内 容 和 结构 与 表现 的 分 离 ” 一 一 所 有 的 CSS 
规则 及 其 样式 都 定义 并 保存 在 CSS 文档 (5-9.css ) 中 。 因 此 ， 在 CSS 文档 中 只 有 “表现 ”。 
而 在 HTML 文档 (5-9.htm ) 中 只 有 “内 容 和 结构 ”， 并 没有 定义 任何 CSS 规则 及 其 样式 。 

@) 为 了 在 HTML 文档 (5-9.htm) 中 使 用 CSS 文档 ( 5-9.css ) 中 定义 的 CSS 规则 及 其 
样式 ， 需 要 在 HIML 文档 (5-9.htm ) 头 部 使 用 link 元 素 链接 CSS 文档 (5-9.css ) 。 这 样 ， 
Web 浏览 器 即 可 将 HIML 文档 ( 5-9.htm ) 中 的 元 素 与 CSS 文档 ( 5-9.css ) 中 的 选择 器 相 
匹配 ， 进 而 允许 HTML 文档 中 的 元 素 应 用 CSS 文档 中 对 应 的 CSS 规则 及 其 样式 。 
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@ 使 用 CSS 验证 服务 ， 同 样 能 够 验证 内 部 样式 表 是 否 符合 语法 规范 ， 而 且 能 够 发 现 
内 部 样式 表 中 违反 语法 规范 的 代码 。 


5.6.4 ”Web 浏览 器 的 兼容 性 视图 设置 


对 于 一 些 较 高 版 本 的 Web 浏览 器 (如 正 10 和 正 11) 有 时 需要 进行 兼容 性 视图 设置 ， 
否则 无 法 正常 显示 一 些 网 页 ， 即 使 与 这 些 网 页 有 关 的 HTML 文档 和 CSS 文档 都 通过 了 
W3C 标记 验证 和 CSS 验证 。 

对 正 10 浏览 器 进行 兼容 性 视图 设置 的 方法 和 步骤 如 下 : 用 正 10 浏览 器 打开 HIML 
文档 后 ， 在 菜单 栏 中 选择 “工具 ”|“ 兼 容 性 视图 设置 ”命令 。 如 图 5-8 所 示 ， 在 弹出 的 

“兼容 性 视图 设置 ”对 话 框 下 方 选中 “在 兼容 性 视图 中 显示 所 有 网 站 ” 复 选 框 。 然 后 ， 单 
击 “ 关 闭 ”按钮 ， 即 可 完成 兼容 性 视图 设置 。 








已 添加 可 赔 容 性 视图 中 的 网 站 0) 





| 聘 除 全) | 











性 视图 中 显示 所 有 了 网站) 
可 在 兼容 性 视图 中 显示 Intranet 站 点 G) 
国 从 Microsoft 下 载 更 新 的 兼容 性 列表 (V) 
阅读 Internet Explorer 隐私 天明 了 解 详细 信息 


人 ac) 











图 5-8 对 IE 10 进行 兼容 性 视图 设置 


完成 兼容 性 视图 设置 之 后 ， 基 本 上 就 可 以 在 较 高 版 本 的 Web 浏览 器 中 正常 显示 Web 
标准 网 页 。 


二 层 亚 样式 表 


层 秋 样式 表 (Cascading Style Sheets，CSS) 是 一 种 用 于 控制 网 页 样式 、 实 现 “ 内 容 和 
结构 与 表现 分 离 ” 的 方法 和 技术 。HTML 文档 与 CSS 文档 的 关系 就 是 “内 容 和 结构 ”与 
“表现 ”的 关系 由 HTML 文档 组 织 网 页 的 内 容 和 结构 ， 而 通过 CSS 文档 控制 网 页 内 
容 和 结构 在 Web 浏览 器 中 的 表现 。 

在 Web 标准 网 页 的 设计 与 制作 中 ， 能 够 通过 样式 “表现 ”网 页 中 的 “内 容 和 结 
构 ”。 换 言 之 ， 样 式 定 义 在 网 页 中 如 何 显示 文本 、 图 像 等 内 容 。 

在 CSS 方法 和 技术 中 ， 能 够 以 三 种 方式 定义 或 应 用 样式 。 
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(1) 在 HIML 元 素 的 开始 标签 中 使 用 style 属性 定义 和 应 用 行内 样式 。 
(2) 在 HIML 文档 头 部 使 用 style 元 素 集中 定义 内 部 样式 表 。 

(3) 在 CSS 文档 中 单独 定义 外 部 样式 表 。 

层 受 性 和 继承 性 是 CSS 的 两 大 特性 。 


5.7.1 CSS 的 层 全 性 


就 CSS 而 言 ， 层 全 是 指 多 个 选择 器 的 作用 范围 发 生 了 蕉 加 。 层 肘 性 (Cascading) 是 指 
当 有 多 个 选择 器 作用 于 同一 HTML 元 素 时 ，Web 浏览 器 如 何 处 理 通过 选择 器 定义 的 


样式 。 
(1) 如 果 通 过 多 个 选择 器 定义 的 样式 未 发 生 冲 突 ， 则 HTML 元 素 将 应 用 通过 选择 器 定 
义 的 所 有 样式 。 


【 例 $-10】 CSS 规则 及 其 样式 未 发 生 冲 突 时 的 CSS 层 玲 性 。HTML 代码 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.0rg/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>css 的 层 登 性 : Css 规则 及 其 样式 未 发 生 冲 突 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
p { color:red } 
.C1 { font-weight:bolder } 
#il { text-decoration:underline } 
</style> 
</head> 
<body> 
<p>p 元 素 将 应 用 通过 类 型 选择 器 定义 的 样式 一 p{color:red}</p> 
<p class="cl">p 元 素 将 应 用 通过 类 型 选择 器 和 类 选择 器 定义 的 样式 一 p{color:red} 
和 .cl{font-weight:bolder}</p> 
<p id="il" class="cl">p 元 素 将 应 用 通过 类 型 选择 器 、ID 选择 器 和 类 选择 器 定义 的 样式 
— p{color:red}、 #il{text-decoration:underline} 和 .cl{font-weight:bolder}</p> 
</body> 
</html> 


在 以 上 HTML 文档 头 部 ， 定 义 了 类 型 选择 器 (p) 、 类 选择 器 (.cl1) 和 了 JD 选择 器 (机 1) 
及 对 应 的 三 条 CSS 规则 ， 在 这 三 条 CSS 规则 中 分 别 定义 了 color 、font-weight 和 
text-decoration 三 个 未 冲突 的 样式 特性 。 

在 HIML 文档 主体 ， 三 个 p 元 素 都 与 类 型 选择 器 (p) 匹配 。 所 以 ， 三 个 p 元 素 中 的 
文本 颜色 均 为 红色 。 第 2 个 和 第 3 个 p 元素 还 与 类 选择 器 (.c1) 匹配 。 所 以 ， 第 2 个 和 第 
3 个 p 元 素 中 的 文本 还 “表现 ”为 较 粗 (bolder) 。 第 3 个 p 元 素 则 与 类 型 选择 器 (p) 、 
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ID 选择 器 〈 贡 1) 和 类 选择 器 〈.c1) 都 匹配 。 所 以 ， 第 3 个 p 元 素 中 的 文本 既 为 红色 ， 又 
带 下 画 线 (underline) ， 并 且 “ 表 现 ” 为 较 粗 (bolder) 。 
(2) 如 果 通 过 多 个 选择 器 定义 的 样式 发 生 冲 突 ， 则 HTML 元 素 将 根据 选择 器 的 优先 级 
应 用 通过 某 个 选择 器 定义 的 样式 。CSS 规范 约定 ， 不 同样 式 的 优先 级 从 高 到 低 依次 为 : 行 
内 样式 > 通过 ID 选择 器 定义 的 样式 > 通过 类 选择 器 定义 的 样式 > 通过 类 型 选择 器 定义 的 
样式 。 
【 例 S-11】 CSS 规则 及 其 样式 发 生 冲 突 时 的 CSS 层 秋 性。HTML 代码 如 下 : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.0rg/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Css 的 层 营 性 : CSs 规则 及 其 样式 发 生 冲 突 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
p { font-style:italic; color:red } 
.C_green { color:green 


#i blue { color:blue } 
#i olive { color:olive 
</style> 
</head> 
<body> 
<p>p 元 素 应 用 通过 类 型 选择 器 定义 的 样式 一 p{font-style:italic; color:red}</p> 
<p class="c_green">p 元 素 应 用 通过 类 型 选择 器 和 类 选择 器 定义 的 样式 一 
p{font-style:italic}、 .c green{color:green}</p> 
<p id="i blue" class="c_green">p 元 素 应 用 通过 类 型 选择 器 和 ID 选择 器 定义 的 样式 
— p{font-style:italic}、 #i blue{color:blue}</p> 
<p style="color:purple" id="i olive">p 元 素 应 用 通过 类 型 选择 器 定义 的 样式 以 及 
行内 样式 一 p{font-style:italic}、style="color:purple" (行内 样式 ) </p> 
</body> 
</html> 


在 以 上 HTML 文档 头 部 的 内 部 样式 表 中 ， 定 义 了 一 个 类 型 选择 器 (p) 、 一 个 类 选择 
器 (.c_green) 和 两 个 ID 选择 器 ( 胡 blue 和 内 _olive》 以 及 对 应 的 四 条 CSS 规则 。 

样式 特性 font-style 只 通过 类 型 选择 器 (p) 定义 。 所 以 ，HTML 文档 主体 中 每 个 p 元 
素 中 的 文本 均 “ 表 现 ”为 斜体 (italic) 。 

通过 四 个 选择 器 均 定 义 了 样式 特性 color。 因 此 ，p 元 素 在 应 用 样式 特性 color 时 会 发 
生 冲 突 。 

在 HTML 文档 主体 中 ， 第 1 个 p 元 素 只 与 类 型 选择 器 (p) 匹配 。 所 以 , 第 1 个 p 元 
素 中 的 文本 显示 为 红色 。 

第 2 个 p 元素 与 类 型 选择 器 (p) 和 类 选择 器 (.c_green) 匹配 ， 但 类 选择 器 (.c_green) 
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的 优先 级 较 高 。 所 以 ， 第 2 个 p 元 素 中 的 文本 显示 为 绿色 。 
第 3 个 p 元素 与 类 型 选择 器 (p) 、ID 选择 器 ( 胡 blue) 和 类 选择 器 (.c_green) 匹配 ， 
但 了 D 选 择 器 ( 胡 blue) 的 优先 级 最 高 。 所 以 ， 第 3 个 p 元 素 中 的 文本 内 容 显示 为 蓝 色 。 
第 4 个 p 元 素 与 类 型 选择 器 (p) 和 ID 选择 器 〈i_olive) 匹配 ， 并 且 在 其 开始 标签 中 
使 用 了 行内 样式 (style="colorpurple") ， 但 行内 样式 (style="color:purple" ) 的 优先 级 最 高 。 
所 以 ， 第 4 个 p 元 素 中 的 文本 内 容 显示 为 紫色 。 


5.7.2 CSS 的 继承 性 


CSS 的 继承 性 (Inheritance) 依赖 于 HTML 元 素 之 间 的 祖先 -后 代 关系 ， 并 使 得 样式 不 
仅 可 以 应 用 于 某 个 HTML 元 素 ， 而 且 允 许 样式 应 用 于 该 HTML 元 素 的 后 代 元 素 ， 除 非 通 
过 优先 级 更 高 的 选择 器 定义 相 冲 突 的 样式 。 

【 例 $-12】 CSS 的 继承 性 。HTML 代码 如 下 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.o0rg/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Ccss 的 继承 性 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
body { color:red } 
.Cl { color:green; text-decoration:underline } 
</style> 
</head> 
<body> 
<p> 第 1 个 p 元 素 继承 了 body 元 素 的 样式 特性 (color:red) <br> 
<em> 第 1 个 em 元素 也 继承 了 body 元 素 的 样式 特性 (color: red) </em> 
</p> 
<p class="cl"> 第 2 个 p 元 素 应 用 了 通过 类 选择 器 ( .cl1) 定义 的 样式 (color:green; 
text-decoration:underline) <br> 
<em> 第 2 个 em 元 素 继承 了 第 2 个 p 元 素 的 样式 ， 即 通过 类 选择 器 ( .cl1) 定义 的 样式 
(color:green;text-decoration:underline) </em> 
</p> 
</body> 
</html> 


在 以 上 HIML 文档 头 部 的 内 部 样式 表 中 ， 定 义 了 一 个 类 型 选择 器 (body) 和 一 个 类 选 
择 嚣 (.cl)， 并 且 通 过 这 两 个 选择 器 均 定义 了 样式 特性 color。 

在 HTML 文档 中 ，body 元 素 与 类 型 选择 器 (body) 匹配。 因此 ，body 元 素 将 应 用 通 
过 类 型 选择 器 (body) 定义 的 样式 (color:red) 。 
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在 HTML 文档 中 ，body 元 素 是 第 1 个 p 元 素 的 父 元 素 ， 第 1 个 p 元 素 又 是 第 1 个 em 
元 素 的 父 元 素 。 因 此 ， 第 1 个 p 元 素 和 第 1 个 em 元 素 都 是 body 元 素 的 后 代 元 素 ， 并 且 会 
继承 body 元 素 的 样式 ， 即 通过 类 型 选择 器 (body) 定义 的 样式 (color:red) 。 所 以 , 第 1 
个 p 元 素 和 第 1 个 em 元 素 中 的 文本 显示 为 红色 。 此 外 ， 第 1 个 em 元素 中 的 文本 容 还 “ 表 
现 ” 为 斜体 。 

第 2 个 p 元素 也 是 body 元 素 的 子 元 素 。 因 此 ， 第 2 个 p 元 素 也 会 继承 body 元 素 的 样 
式 (color:red) 。 同 时 ， 第 2 个 p 元 素 也 与 类 选择 器 〈.c1) 匹配 。 但 由 于 类 选择 器 的 优先 
级 高 于 类 型 选择 器 ， 所 以 ， 第 2 个 p 元 素 将 应 用 通过 类 选择 器 (.cl) 定 义 的 样式 (color:green 
和 text-decoration:underline) 。 这 样 ， 第 2 个 p 元 素 中 的 文本 显示 为 绿色 ， 并 且 带 有 下 画 线 。 

第 2 个 em 元 素 是 第 2 个 p 元 素 的 子 元 素 。 因 此 ， 第 2 个 em 元 素 也 会 继承 第 2 个 p 
元 素 的 样式 ， 即 通过 类 选择 器 (.cl1) 定 义 的 样式 (color:green 和 text-decoration:underline ) 。 
所 以 ， 第 2 个 em 元 素 中 的 文本 也 显示 为 绿色 ， 并 且 带 有 下 画 线 。 此 外 ， 第 2 个 em 元 素 中 
的 文本 还 “表现 ”为 斜体 。 

注意 : 并 不 是 所 有 的 样式 特性 都 具有 继承 性 。 一般 而 言 ，color、font-family、 
font-size、font-style、font-weight、text-align、text-indent、letter-spacing 和 line-height 等 类 
型 和 区 块 特性 大 都 具有 继承 性 ， 而 text-decoration:none、background-color 和 background- 
image 等 背景 及 其 他 一 些 样 式 特性 则 不 具有 继承 性 。 


E8 小 结 


“内 容 和 结构 与 表现 的 分 离 ” 是 Web 标准 网 页 设计 与 制作 的 主要 目标 之 一 。 通 常情 
况 下 ，“ 内 容 和 结构 ”出 现在 HIML 文档 中 ，“ 表 现 ” 的 定义 则 保存 在 CSS 文档 中 。 

在 HTML 4.01 规范 中 ，HTML 文档 主要 分 为 严格 (Strict) 和 过 渡 〈Transitional) 两 种 
子 类 型 。 在 Strict 类 型 的 HTML 文档 中 ， 不 能 使 用 表现 性 元 素 和 表现 性 属性 ， 而 使 用 样式 
实现 表现 。 而 在 Transitional 类 型 的 HTML 文档 中 ， 还 允许 使 用 表现 性 元 素 和 表现 性 
属性 。 

一 个 HIML 文档 应 该 遵循 规定 的 语法 规范 。 使 用 W3C 在 线 提供 的 标记 验证 服务 
(Markup Validation Service) ， 或 者 Dreamweaver 提供 的 文档 验证 功能 ， 可 以 验证 HIML 
文档 的 语法 规范 性 。 

在 CSS 方法 和 技术 中 ， 能 够 以 行内 样式 、 内 部 样式 表 或 外 部 样式 表 三 种 方式 之 一 定 
义 或 应 用 样式 。 

一 个 样式 表 通 常 包含 多 条 CSS 规则 (Rule) 。 每 条 CSS 规则 由 选择 器 和 一 个 或 多 个 特 
性 声明 构成 。 

实现 样式 的 选择 器 可 以 分 为 类 型 选择 器 、 类 选择 器 、ID 选择 器 、 后 代 选 择 器 和 子 元 

在 一 个 HTML 文档 中 ID 选择 器 及 其 实现 的 样式 只 能 被 一 个 元 素 应 用 一 次 ， 而 类 选择 
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器 及 其 实现 的 样式 可 以 应 用 于 多 个 元 素 。 

层 又 性 和 继承 性 是 CSS 的 两 大 特性 。 

如 果 通 过 多 个 选择 器 定义 的 样式 发 生 冲 突 ， 则 HTML 元 素 将 按照 “行内 样式 > 通过 
ID 选择 器 定义 的 样式 > 通过 类 选择 器 定义 的 样式 > 通过 类 型 选择 器 定义 的 样式 ”的 优先 级 
顺序 应 用 相应 的 样式 。 

CSS 的 继承 性 使 得 样式 不 仅 可 以 应 用 于 某 个 HIML 元 素 ， 而 且 允 许 样式 应 用 于 该 
HTML 元 素 的 后 代 元 素 ， 除 非 通过 优先 级 更 高 的 选择 器 定义 相 冲 突 的 样式 。 

W3C 网 站 在 线 提供 的 CSS 验证 服务 不 仅 能 够 验证 CSS 文档 是 否 符合 语法 规范 ， 而 且 
能 够 发 现 CSS 文档 中 违反 语法 规范 的 代码 。 


.9 习题 


1. 在 【 例 5-2】 的 HTML 文档 中 ， 仅 将 文档 类 型 定义 改写 为 HIML 4.01 Strict 文档 类 
型 的 定义 。 然 后 ， 使 用 W3C 标记 验证 服务 检查 改写 后 的 HIML 文档 的 语法 规范 性 并 分 析 
2. 将 【 例 5-5】 中 HTML 文档 主体 中 的 代码 做 如 下 修改 : 
<body> 
<p id="one">ID 选择 器 1</p> 
<p id="two">ID 选择 器 2</p> 
<p id="two">ID 选择 器 3</p> 
</body> 
然后 ， 使 用 W3C 标记 验证 服务 检查 HIML 文档 是 否 规 范 。 
3. 在 【 例 5-7】 的 基础 上 验证 : 在 类 型 选择 器 a 后 面 使 用 :link、:visited 、:hover 
和 :active 四 个 伪 类 定义 CSS 规则 时 ， 必 须 遵 循 LVHA 的 顺序 ， 即 a:link 一 a:visited 一 
ahover 一 aactive 的 顺序 。 和 否则， 文本 超 链接 的 鼠标 悬 停 和 被 激活 样式 将 不 起 作用 。 
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可 扩展 超 文 本 标记 语言 (eXtensible HyperText Markup Language，XHTML) 是 一 种 新 
兴 的 网 页 设计 和 制作 语言 。XHTML 是 在 HTML 基础 上 发 展 起 来 的 ， 同 时 吸取 了 可 扩展 标 
记 语言 (eXtensible Markup Language，XML) 语法 严谨 的 优点 。 因 此 , XHTML 比 HTML 
具有 更 加 严谨 的 语法 ， 能 够 为 众多 厂商 的 Web 浏览 器 研发 提供 规范 的 技术 标准 , XHTML 
的 可 扩展 性 和 灵活 性 将 适应 未 来 网 络 应 用 的 更 多 需求 。 
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6.1.1 缺乏 语法 规范 性 的 HTML 文档 


实际 上 ， 万 维 网 中 的 许多 页 面 都 是 规范 性 很 差 、 语 法 很 不 严谨 的 HTML 文档 ， 但 仍 
然 可 以 用 Web 浏览 器 打开 。 
【 例 6-1】 规范 性 很 差 、 语 法 很 不 严谨 的 HTML 文档 ，HTML 代码 如 下 : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.0rg/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>This is bad HTML</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<body> 
<p>Bad HTML 
</body> 


在 上 述 HIML 代码 中 ，html、head 和 p 元 素 都 没有 相应 的 结束 标签 ， 在 语法 上 缺乏 严 
谨 性 ， 但 仍然 可 以 用 正 浏览 器 打开 ， 甚 至 能 够 通过 W3C 标记 验证 服务 的 语法 检查 。 

另 一 方面 ， 现 今 的 软件 市 场 上 存在 着 不 同 厂商 提供 的 Web 浏览 器 。 国 外 流行 的 Web 
浏览 器 有 Microsoft Internet Explorer、Mozilla Firefox 和 Google Chrome 等 ， 国 内 有 搜狗 、 
腾讯 Tencent Traveler、 傲 游 Maxthon、 世 界 之 窗 Theworld 和 360 安全 浏览 器 等 。 如 果 设 计 
和 制作 网 页 的 语言 缺乏 必要 的 规范 、 语 法 不 严谨， 运行 在 计算 机 上 的 不 同 Web 浏览 器 将 
难以 支持 万 维 网 中 数 以 亿 计 的 网 页 。 反 之 ， 如 果 使 用 统一 规范 的 网 页 设计 和 制作 语言 、 
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Nt 
HTML 文档 具有 规范 和 良好 的 结构 ，Web 浏览 器 与 网 页 之 间 的 适 配 性 将 得 到 大 大 增强 。 
6.1.2 ”XHTML 的 面世 


为 了 规范 网 页 设计 和 制作 语言 ，W3C 于 2000 年 推出 了 XHTML 。 

目前 ， 较 流行 的 XHTML 1.0 版 本 有 以 下 三 种 。 

(1) XHTML 1.0 Strict (严格 版 ) 。 严 格 版 是 根据 HIML 4.01 Strict 改编 的 。 与 HIML 
4.01 Strict 一 样 ， 在 XHTML 1.0 Strict 中 不 能 使 用 表现 性 元 素 或 表现 性 属性 ， 例 如 center、 
font、s、strike 和 nu 等 表现 性 元 素 以 及 align、background 和 bgcolor 等 表现 性 属性 。 

(2) XHTML 1.0 Transitional (过 渡 版 )。 过 渡 版 是 根据 HTML 4.01 Transitional 改编 
的 。 与 HIML 4.01 Transitional 一 样 ， 在 XHTML 1.0 Transitional 中 可 以 使 用 在 Strict 版 本 
中 禁用 的 表现 性 元 素 或 表现 性 属性 。 

(3) XHTML 1.0 Frameset (框架 版 )。 框 架 版 是 根据 HTML 4.01 Frameset 改编 的 ， 并 
允许 于 在 网 页 中 定义 和 使 用 框架 。 

在 上 述 三 种 XHTML 1.0 版 本 中 ，XHTML 1.0 Transitional 规定 了 XHTML 的 基本 语 
法 。XHTML 1.0 Strict 不 仅 遵循 XHTML 的 基本 语法 规定 ， 而 且 不 允许 使 用 表现 性 元 素 或 
表现 性 属性 。 在 XHTML 1.0 Transitional 和 Strict 的 基础 上 ，XHTML 1.0 Frameset 允许 在 网 
页 中 定义 和 使 用 框架 。 

总 之 ，XHTML 是 一 种 增强 型 的 HTML， 是 语法 更 严谨 、 元 素 更 纯净 的 HIML 版 
本 ，XHTML 有 助 于 编写 良 构 (Well-structured) 的 HTML 文档 ， 这 样 的 HTML 文档 可 以 
很 好 地 工作 于 了 下、Firefox 和 Chrome 等 各 种 厂商 的 Web 浏览 器 ， 并 且 能 够 向 后 兼容 。 此 
外 ，XHTML 还 具有 良好 的 可 扩展 性 和 灵活 性 ， 不 仅 支持 台式 计算 机 和 便携 式 电 脑 ， 而 且 
支持 iPad、iPhone 等 手持 移动 通信 设备 ， 能 够 适应 未 来 网 络 应 用 的 更 多 需求 。 








62 XHTML 的 语法 规定 


HIML 的 语法 比较 松散 ， 网 页 设计 和 制作 者 使 用 起 来 比较 方便 。 但 对 Web 浏览 器 来 
说 ， 网 页 设计 语言 的 语法 越 松散 ， 处 理 起 来 却 越 困 难 。 因 此 ，W3C 在 制定 XHTML 规范 
时 ， 要 求 编写 HTML 文档 时 必须 遵循 更 加 严格 和 规范 的 语法 。 

1. XHTML 的 一 般 性 语法 规定 

1) 必须 关闭 打开 的 标签 

在 HTML 中 ， 人 允许 某 些 非 空 元 素 只 有 开始 标签 、 可 以 没有 结束 标签 。 例 如 ， 上 元素 的 
开始 标签 <li> 可 以 不 用 结束 标签 <Mi> 来 关闭 ， 但 这 在 XHTML 中 是 不 允许 的 。XHTML 规 
定 ， 必 须 关 闭 打开 的 标签 。 换 言 之 ， 开 始 标签 必须 有 相应 的 结束 标签 。 

对 于 br、meta 和 img 等 空 元 素 〈 即 没有 结束 标签 的 元 素 ) ， 需 要 在 开始 标签 中 的 元 素 
名 后 面 使 用 "来 关闭 。 例 如 ，<br> 必 须 写 为 <br>，<img…> 必 须 写 为 <img… 人 >。 

2) 元 素 名 和 属性 名 必须 小 写 

在 HIML 中 ， 标 签 中 的 元 素 名 和 属性 名 可 以 小 写 、 也 可 以 大 写 。 但 与 HTML 不 同 ， 
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XHTML 是 区 分 字母 大 小 写 的 〈Case Sensitive) ， 元 素 名 和 属性 名 必须 小 写 ， 并 且 不 允许 
大 小 写 夹 杂 。 例如， 在 HIML 中 允许 <HTML>、<TITLE>， 但 在 XHTML 中 只 允许 
<html>、<title>。 

3) 元 素 以 及 标签 之 间 必 须 正 确 嵌 套 

XHTML 规定 ， 如 果 在 关闭 一 个 标签 之 前 又 打开 另 一 个 新 标签 ， 则 必须 首先 关闭 新 标 
签 ， 然 后 才能 关闭 前 一 个 标签 。 换 言 之 ， 关 闭 后 打开 的 标签 之 后 ， 才 能 关闭 先 打开 的 标 

例如 ， 在 XHTML 中 ， 不 允许 <p>Here is an emphasized <em>keyword.</p></em>， 只 
允许 <p>Here is an emphasized <em>keyword.</em></p>。 这 样 ，p 元 素 才 能 正确 嵌 套 em 
元 素 ， 并 正确 反映 p 元 素 与 em 元 素 之 间 的 父子 关系 。 

正确 嵌 套 元 素 以 及 标签 ， 可 以 形成 良 构 的 HIML 文档 。 

4) 元 素 的 属性 值 必须 用 双 引 号 〈"") 括 起 来 

在 HTML 中， 当 属 性 值 是 数字 时 ， 可 以 不 用 引号 ; 但 是 在 XHTML 中 ， 所 有 的 属性 值 
(包括 数字 ) 必须 用 双 引 号 括 起 来 。 

例如 ， 在 HIML 中 ， 人 允许 <table bgcolor=#DDEEFF border=10>; 但 是 在 XHTML 中 ， 
只 允许 <table bgcolor="#DDEEFF" border="10">。 

5) 不 能 在 注释 内 容 中 使 用 “--” 

“--” 只 能 出 现在 XHTML 注释 的 开头 和 结尾 ， 而 在 注释 内 容 中 不 能 再 使 用 “--”。 
例如 ， 在 XHTML 中 ， 下 面 的 代码 是 无 效 的 : 

<!- -这 里 是 注释 ----------- 这 里 是 注释 --> 

6) 图 像 标签 必须 有 替代 性 文字 

在 XHTML 中 ， 每 个 图 像 标签 都 必须 使 用 alt 属性 添加 替代 性 文字 。 例 如 ， 在 XHTML 
中 ， 以 下 代码 是 有 效 的 : 

<img src="ball.jpg" alt="large red ball" title="]large red ball"/> 


注意 : 为 了 兼容 Firefox 浏览 器 和 下 浏览 器 ， 对 于 图 像 标签 ， 尽 量 采 用 alt 和 title 双 
标签 。 





遵循 上 述 XHTML 语法 规定 的 HTML 文档 称 为 良 构 的 HTML 文档 。 设 计 和 制作 网 页 
时 如 果 遵循 上 述 XHTML 语法 规定 ，HTML 文档 能 够 被 大 部 分 常见 的 Web 浏览 器 正确 并 快 
速 地 编译 。 在 以 上 语法 规定 中 ， 有 的 看 上 去 比较 奇怪 ， 但 这 一 切 都 是 为 了 使 网 页 设计 语言 
有 一 个 统一 和 唯一 的 标准 ， 以 便 使 用 各 种 Web 浏览 器 都 能 正常 地 打开 HTML 文档 并 流畅 
地 显示 网 页 。 
由 此 可 见 ， 从 HIML 过 渡 到 XHTML， 最 大 的 变化 在 于 HIML 文档 必须 是 良 构 的 。 
2. Strict 类 型 的 XHTML 语法 规定 
此 外 ， 在 Strict 类 型 的 XHTML 文档 主体 中 ， 还 必须 遵循 以 下 语法 规范 。 
1) 文本 内 容 不 能 直接 出 现在 主体 中 
例如 ， 以 下 代码 的 语法 是 不 规范 的 : 
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<body>Hello, World!</body> 
因为 文本 内 容 “Hello, World!” 直 接 出 现在 body 元 素 中 。 
在 Strict 类 型 的 XHTML 文档 主体 ， 文 本 内 容 必 须 出 现在 p、ul、hl、h2、h3、h4、h5 
和 h6 等 块 级 元 素 中 ， 或 者 出 现在 这 些 块 级 元 素 的 子 元 素 中 。 
按照 本 条 语法 规则 ， 以 下 代码 的 语法 则 是 规范 的 : 
<body><p>Hello, World!</p></body> 
或 者 
<body><p><em>Hello, World!</em></p></body> 
2) 行内 元 素 必须 嵌 套 在 块 级 元 素 中 
例如 ， 以 下 代码 的 语法 是 不 规范 的 : 
<body><em>Hello, World!</em></body> 
因为 行内 元 素 em 直接 出 现在 body 元 素 中 。 
在 Strict 类 型 的 XHTML 文档 中 ，a、em、img、strong 等 行内 元 素 必须 典 套 在 p、hl、 
h2、h3、h4、h5 和 h6 等 块 级 元 素 中 ， 而 不 能 直接 出 现在 body 元 素 中 。 
按照 本 条 语法 规则 ， 以 下 代码 的 语法 则 是 规范 的 : 
<body><p><em>Hello, World!</em></p></body> 
或 者 
<body><p><strong>Hello, World!</strong></p></body> 
或 者 


<p><img src="../ch02/2-4.gif" alt=" 图 像 替代 性 文字 "/></p> 





€3 XHTML 文档 的 基本 结构 














使 用 XHTML 设计 和 制作 网 页 ， 其 中 的 代码 同样 保存 在 HTML 文档 中 ， 即 文件 的 扩展 
名 仍然 是 .htm 或 .html。 但 由 于 遵循 更 加 规范 的 语法 规定 ， 特 将 使 用 XHTML 编写 的 HIML 
文档 称 为 XHTML 文档 。 

使 用 XHTML 设计 和 制作 网 页 时 ，XHTML 文档 必须 具有 一 定 的 基本 结构 。 

【 例 6-2】 使 用 XHTML 设计 和 制作 网 页 ， 使 创建 的 XHTML 文档 6-2.htm 具有 一 定 的 
基本 结构 。XHTML 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.0org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 


<html] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

















<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
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<title>XHTML 文档 的 基本 结构 </title> 
</head> 
<body> 
Hello, World! 
</body> 
</html> 


XHTML 文档 的 基本 结构 包括 以 下 几 部 分 : 

(1) 首先 进行 文件 类 型 定义 (Document Type Definition, DTD) ， 以 声明 当前 XHTML 
文档 所 遵循 的 版 本 。 该 XHTML 文档 中 的 DID 声明 ，XHTML 文档 遵循 XHTML 1.0 
Transitional 的 规范 及 语法 规定 。 如 果 需 要 声明 XHTML 文档 遵循 XHTML 1.0 Strict 的 规范 
及 语法 规定 ， 在 DID 部 分 则 使 用 如 下 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.o0rg/TR/xhtml1l/DTD/xhtmll-strict.dtd"> 


注意 : DID 并 非 XHTML 文档 中 的 元 素 。 换 言 之 ，<!IDOCTYPE…> 并 不 是 一 个 标签 。 


(2) 必 须 使 用 唯一 的 html 元 素 作为 XHTML 文档 的 根 元 素 ， 并 且 其 他 所 有 元 素 及 标签 
都 必须 正确 嵌 套 在 <html> 和 </html> 标 签 对 之 间 。 

(3) 在 XHTML 文档 中 ， 必 须 将 html 元 素 的 xmlns 属性 值 设置 为 “http://www. 
w3.org/1999/xhtml”， 以 指定 整个 文档 所 使 用 的 命名 空间 (Namespace) 。 

(4) 在 XHTML 文档 头 部 使 用 meta 元 素 将 编码 方式 设置 为 中 文 简体 ， 具 体 使 用 如 下 
代码 : 

<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 


(5) html 元 素 中 必须 包含 一 个 head 元 素 和 一 个 body 元 素 ， 并 且 head 元 素 中 必须 包 
含 一 个 title 元 素 。 


64 使 用 W3C 标记 验证 服务 检查 XHTML 文档 的 语法 


W3C 标记 验证 服务 不 仅 可 以 检查 HIML 文档 的 语法 ， 而 且 可 以 检查 XHTML 文档 的 
语法 。 

【 例 6-3】 使 用 W3C 标记 验证 服务 检查 XHTML 文档 的 语法 。 有 具体 步骤 如 下 : 

(1) 上 传 并 验证 XHTML 文档 。 在 正 浏览 器 的 地 址 栏 中 输入 如 下 URL: 
http://validatorw3.orgl#validate by upload， 可 以 打开 W3C 网 站 的 Markup Validation Service 
网 页 。 在 该 网 页 的 Validate by File Upload 选项 卡 中 单 击 “ 浏 览 ” 按 钮 ， 通 过 打开 的 “选择 
文件 ”对 话 框 在 本 地 计算 机 中 选 定 需要 验证 的 XHTML 文档 。 然 后 ， 单 击 Check 按钮 ， 即 
可 将 选 定 的 XHTML 文档 上 传 到 W3C 网 站 并 对 该 XHTML 文档 进行 规范 性 验证 。 

(2) 根据 错误 提示 修改 XHTML 文档 。 如 果 在 上 传 的 XHTML 文档 中 存在 不 符合 语法 
规范 的 代码 ，W3C 标记 验证 服务 会 给 出 相应 的 错误 提示 。 根 据 错误 提示 ， 使 用 Notepad 软 
件 修改 XHTML 文档 中 的 相应 代码 。 
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(3) 重新 上 传 并 验证 XHTML 文档 。 如 果 修 改 后 的 XHTML 文档 不 存在 违反 语法 规范 
的 代码 ，W3C 标记 验证 服务 会 给 出 验证 通过 提示 。 

【 例 6-4】 将 【 例 5-4】 中 的 HIML 文档 改写 为 Strict 类 型 的 XHTML 文档 。XHTML 
代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0rg/TR/xhtmll1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<title> 将 HTML 文档 改写 为 XHTML 文档 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<style type="text/css"> 
body { background-color:Silver } 
hl { text-align:center; color:Red } 
h2 { text-align:center } 
-Zhengwen { text-align:center; color:Blue; font-weight:bolder } 
</style> 
</head> 
<body> 
<h1> 静 夜 思 </h1l> 
<h2> 唐 .李白 </h2> 
<p class="zhengwen"> 床 前 明月 光 ， 疑 是 地 上 和 霜 。<br/> 
举 头 望 明月 ， 低 头 思 故乡 。</P> 
<p>【 简 析 】 这 是 写 远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 
它 不 追求 想象 的 新 颖 奇特 ， 也 握 弃 了 辞 汇 的 精工 华美 ， 它 以 清新 朴素 的 笔触 ， 打 写 了 丰富 深 曲 的 内 容 。 
境 是 境 ， 情 是 情 ， 那 么 到 真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 占 今 ”。</p> 
</body> 
</html> 


注意 : 在 将 HTML 文档 改写 为 Strict 类 型 的 XHTML 文档 时 ， 不 仅 需要 改写 DTD 上 声 
明和 html 元 素 开始 标签 中 的 代码 ， 而 且 必 须 关闭 br、meta、image 和 link 等 空 元 素 的 开始 
标签 。 


5, XHTML+CSS 


在 Web 标准 网 页 设计 和 制作 中 ，XHTML 文档 与 HTML 文档 的 作用 和 用 法 相 类 似 一 一 
使 用 XHTML 文档 组 织 网 页 的 内 容 和 结构 ， 而 通过 CSS 文档 控制 网 页 内 容 的 表现 ， 从 而 实 
现 “ 内 容 和 结构 与 表现 的 分 离 ”。 

【 例 6-$】 使 用 CSS 文档 和 Strict 类 型 的 XHTML 文档 实现 【 例 5-9】。 具 体 步骤 如 下 : 

(1) 在 CSS 文档 中 创建 外 部 样式 表 ， 并 将 以 下 代码 保存 在 CSS 文档 (6-5.css) 中 。 

body { background-color:Silver } 


hl { text-align:center; color:Red; letter-spacing:lem } 


h2 { text-align:center } 
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-Zhengwen { text-align:center; color:Blue; font-weight:bolder } 
(2) 将 以 下 代码 保存 在 XHTML 文档 (6-5.htm) 中 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<title> 将 HTML 文档 改写 为 Strict 类 型 的 XHTML 文档 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<link rel="stylesheet" type="text/css" href="6-5.css"/> 
</head> 
<body> 
<h1> 静 夜 思 </h1> 
<h2> 唐 .李白 </h2> 
<p class="zhengwen"> 床 前 明月 光 ， 疑 是 地 上 和 霜 。<br/> 
举 头 望 明月 ， 低 头 思 故 乡 。</p> 
<p>【 简 析 】 这 是 写 远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 
它 不 追求 想象 的 新 颖 奇特 ， 也 据 弃 了 辞藻 的 精工 华美 ， 它 以 清新 朴素 的 笔 角 ， 抒 写 了 丰富 深 曲 的 内 容 。 
境 是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 赞 它 是 “ 妙 绝 上 古今 ”</p> 
</body> 
</html> 


注意 : 在 该 XHTML 文档 头 部 ， 仍 然 使 用 link 元 素 链接 CSS 文档 ( 6-5.css ) 中 的 外 部 样 
式 表 。 


6.6\ 使 用 字符 实体 在 网 页 中 显示 特殊 字符 


在 HIML 或 XHTML 文档 中 ， 某 些 字符 有 着 特殊 的 用 途 。 例 如 ， 小 于 号 〈<) 和 大 于 
号 (>) 用 于 定义 HTML 元 素 的 开始 标签 和 结束 标签 ， 这 些 字 符 在 网 页 中 是 不 会 照 原样 显 
示 的 。 为 了 在 Web 浏览 器 中 显示 这 些 特殊 字符 ， 必 须 在 HTML 文档 的 源 代码 中 使 用 字符 
实体 (Character Entity) 。 
个 字符 实体 依次 包括 三 个 部 分 : (1) 一 个 和 号 (有 &&); (2) 一 个 实体 名 称 或 者 井 号 
(#) 和 一 个 实体 编号 ; (3) 一 个 分 号 (;) 。 
表 6-1 列 出 了 HTML 文档 中 常用 的 字符 实体 。 


表 6-1 HTML 文档 中 常用 的 字符 实体 













字符 实体 

















在 网 页 中 要 显示 的 特殊 字符 特殊 字符 的 名 称 使 用 实体 名 称 | 使 用 实体 编号 
无 间断 空格 (non-break space) &nbsp; | &#160; 
< 小 于 号 (less-than sign) &lt: | &#60; 
务 大 于 号 (greater-than sign) Rat: | R&#62: 
& 和 号 (ampersand) &amp: &#38; 
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例如 ， 为 了 在 网 页 中 显示 小 于 号 ， 必 须 在 HTML 文档 中 使 用 代码 : 
&1lt; 或 者 g#60; 
又 如 ， 在 网 页 中 经 常 需 要 使 用 空格 。 但 如 果 在 HTML 文档 中 有 多 个 连续 的 一 般 空 
格 ， 在 网 页 中 仅 显 示 一 个 空格 。 
例如 ， 如 果 在 HIML 文档 中 使 用 如 下 一 段 代码 : 
<p> 通 常情 况 下，HTML 文档 中 多 余 的 一 般 空格 会 裁 掉 。</p> 
那么 ， 在 Web 浏览 器 中 上 述 代 码 段 将 显示 为 : 
通常 情况 下 ，HTML 文档 中 多 余 的 一 般 空格 会 裁 掉 。 
但 如 果 在 HTML 文档 中 使 用 字符 实体 〈&nbsp:) ， 就 可 以 在 Web 浏览 器 中 显示 连续 的 多 
个 空格 。 
例如 ， 如 果 在 HTML 文档 中 使 用 如 下 一 段 代码 : 
<p> 在 HTML 文档 中 使 用 字符 实体 gnbsp;&nbsp; gnbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; 可 以 在 Web 浏览 器 中 显示 连续 的 多 个 空格 。</p> 
那么 ， 在 Web 浏览 器 中 上 述 代 码 段 将 显示 为 : 
在 HTML 文档 中 使 用 字符 实体 可 以 在 Web 浏览 器 中 显示 连续 的 多 个 空格 。 


E7 小 结 


相对 于 HTML，XHTML 的 语法 更 加 规范 、 更 加 严谨 。 因 此 ，XHTML 文档 能 够 被 
Web 浏览 器 更 容易 、 更 正确 地 识别 。 

在 XHTML 文档 中 ， 所 有 元 素 的 标签 必须 关闭 ， 元 素 名 和 属性 名 必须 小 写 ， 元 素 以 及 
标签 之 间 必 须 正确 嵌 套 ， 元 素 的 属性 值 必须 用 双 引 号 "" 括 起 来 ， 不 能 在 注释 内 容 中 使 用 
“--”， 图 像 标签 必须 有 替代 性 文字 。 

较 流 行 的 XHTML 1.0 版 本 有 Strict、Transitional 和 Frameset 三 种 子 类 型 。 

在 Strict 类 型 的 XHTML 文档 中 不 能 使 用 表现 性 元 素 或 表现 性 属性 。 在 Transitional 类 
型 的 XHTML 文档 中 可 以 使 用 在 Strict 版 本 中 禁用 的 表现 性 元 素 或 表现 性 属性 。 

使 用 XHTML 和 CSS， 能 够 更 好 地 实现 “内 容 和 结构 与 表现 的 分 离 ”。 

为 了 在 Web 浏览 器 中 显示 小 于 号 (<) 、 大 于 号 (>) 、 和 号 〈&) 和 引号 〈") 等 特 
殊 字 符 ， 必 须 在 HTML 文档 的 源 代码 中 使 用 相应 的 字符 实体 。 


1. 简 述 XHTML 的 语法 规定 。 


第 6 章 可 扩展 超 文本 标记 语言 


2. 找 出 以 下 代码 中 违反 XHTML 语法 规定 的 地 方 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<title> 违 反 语法 规定 的 XHTML 文档 </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</head> 
<BODY> 
<!-- 在 该 XHTML 文档 中 -- 存 在 一 些 违反 XHTML 语法 规定 的 地 方 --> 
<em> 找 出 代码 中 违反 XHTML 语法 规定 的 地 方 </em> 
<p><img src="../ch02/2-4.gif" width=200 height=50></p> 
并 对 违反 语法 规定 的 地 方 进行 修改 
</body> 
</html> 


3. 编写 XHTML 文档 并 使 用 字符 实体 ， 实 现在 Web 浏览 器 中 显示 如 图 6-1 所 示 的 程 
序 代码 。 


使 用 字符 实体 在 网 页 中 显示 特殊 字符 - Windows Internet E... 此 | 右 | 凤 | 


GO | 则 Ewe rverwer, 国 | 好 x| 图 








过 必 球 天。 交合 用 字符 实体 在 网 页 中 显示 特殊 字符 





function print_multiplication_table(){ 
var i,j 


document. write(”<h1> 猜 猜 以 下 代码 的 功能 《</h1>”) 
for (i=1;i¢=9;i++){ 
for (j=1; jC=i;j++) { 
document. write (i+”*”+j+”=”+i*j) 
if (i*j¢<10) document. write(’&nbsp;&nbsp;”) 
else document. write(’&nbsp:”) 


document. write(”<br/>”) 





6-1 使 用 字符 实体 显示 特殊 字符 
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应 用 div+CSS 布局 网 页 


通过 CSS 能 够 定制 和 控制 文本 、 图 像 等 内 容 在 网 页 中 的 表现 ， 尤 其 能 够 使 文本 在 网 
页 中 为 不 同 的 字体 、 大 小 和 颜色 。 EA dy 元 素 和 CSS 还 能 够 对 网 页 进行 


人 盒子 模型 


盒子 模型 (Box Model) 在 网 页 布局 中 至 为 关键 。 在 盒子 模型 中 ，HTML 文档 主体 中 
的 每 个 元 素 都 被 Web 浏览 器 看 成 是 一 个 矩形 合子。 盒子 模型 指定 了 在 网 页 上 如 何 显 示 元 
素 及 其 内 容 。 如 图 7-1 所 示 ， 元 素 盒子 的 最 里 面 是 元 素 中 的 文字 、 图 像 等 内 容 (Content)。 
直接 包围 内 容 的 是 填充 (Padding) ， 在 填充 中 可 以 呈现 元 素 及 其 内 容 的 背景 。 填 充 以 外 是 
边框 (Border) ， 边 框 包围 着 填充 。 边 框 以 外 是 最 外 层 的 边界 〈Margin) ， 边 界 默认 是 透 
明 的 ， 不 会 遮挡 其 后 的 任何 内 容 。 
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7-1 盒子 模型 


注意 : 
@ 在 如 图 7-1 所 示 的 盒子 模型 中 ， 从 内 向 外 的 4 个 矩形 框 依次 表示 内 容 与 填充 、 填 充 
与 边框 、 边 框 与 边界 、 盒 子 与 外 界 的 分 隔 线 。 
@ 在 盒子 模型 中 ， 填 充 、 边 框 和 边界 还 可 以 分 解 为 上 、 右 、 下 和 左 四 个 部 分 。 例 
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如 ， 填 充 又 可 以 分 解 为 上 填充 (top padding ) 、 右 填充 (right padding ) 、 下 填充 (bottom 
padding ) 和 左 填充 (left padding ) 。 同 理 ， 边 框 也 可 以 分 解 为 上 边框 (top border ) 、 右 边 
框 (rightborder) 、 下 边框 (bottom border ) 和 左边 框 (left border ) 。 


(2 与 盒子 模型 有 关 的 样式 特性 


与 盒子 模型 有 关 的 样式 特性 主要 分 为 方 框 和 边框 两 大 类 。 
7.2.1 方 框 特性 


方 框 特性 用 于 设置 元 素 的 宽度 (width) 、 高 度 (height) 、 浮 动 方式 〈float) 、 填 充 
宽度 (padding) 和 边界 宽度 (margin) 等 特性 。 

1. 宽度 (width) 

该 特性 用 于 设置 元 素 内 容 所 占 的 宽度 。width 特性 值 通常 是 以 px (像素) 和 em (字体 
高 度 ) 为 单位 的 相对 值 。 

2. 高 度 (height) 

该 特性 用 于 设置 元 素 内 容 所 占 的 高 度 。height 特性 值 通常 是 以 px (像素 ) 和 em (字体 
高 度 ) 为 单位 的 相对 值 。 

3. 浮动 方式 (float) 

该 特性 用 于 设置 元 素 及 其 盒子 的 浮动 方式 。float 特性 值 可 以 是 left、right 或 none， 分 
别 表示 元 素 及 其 盒子 向 左 浮动 、 向 右 浮动 或 不 浮动 ， 其 中 none 是 默认 值 。 

4. 填充 宽度 ‘padding) 

该 特性 用 于 设置 元 素 盒子 中 的 填充 宽度 。padding 特性 值 通常 是 以 px (像素 ) 和 em( 字 
体高 度 ) 为 单位 的 相对 值 ， 也 可 以 使 用 padding-top 、padding-right、padding-bottom 和 
padding-left 特性 分 别 设置 上 、 右 、 下 和 左 填 充 的 宽度 。 

5. 边界 宽度 (margin) 

该 特性 用 于 设置 元 素 盒子 中 的 边界 宽度 。 与 padding 特性 值 类 似 ，margin 特性 值 通常 
是 以 px( 像 素 ) 和 em( 字 体高 度 ) 为 单位 的 相对 值 ， 也 可 以 使 用 margin-top 、margin-right、 
margin-bottom 和 margin-left 特性 分 别 设置 上 、 右 、 下 和 左边 界 的 宽度 。 


7.2.2 边框 特性 




















边框 特性 用 于 设置 元 素 盒子 中 的 边框 宽度 (borderwidth) 、 边 框 样式 〈border-style) 
和 边框 颜色 (border-color) 等 特性 。 

1. 边框 宽度 border-width) 

该 特性 用 于 设置 元 素 盒子 中 的 边框 宽度 。border-width 特性 值 通常 是 以 px (像素 ) 和 
em〔 字 体高 度 ) 为 单位 的 相对 值 ， 也 可 以 使 用 border-top-width、border-right-width、 
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border-bottom-width 和 border-left-width 特性 分 别 设置 上 、 右 、 下 和 左边 框 的 宽度 。 

2. 边框 样式 (border-style) 

该 特性 用 于 设置 元 素 盒子 中 的 边框 样式 。border-style 特性 值 可 以 是 none (无 边框 ) 、 
dotted (点 划 线 ) 、dashed (虚线 ) 、solid( 实 线 ) 、double( 双 线 ) 、groover( 槽 状 〉 、 
ridge (将 状 ) 、insert (四 陷 ) 和 outset ( 凸 出 ) 。 也 可 以 使 用 bordertop-style 、 
border-right-style、border-bottom-style 和 border-left-style 特性 分 别 设置 上 、 右 、 下 和 左边 框 
的 样式 。 

3. 边框 颜色 (border-color) 

该 特性 用 于 设置 元 素 盒 子 中 的 边框 颜色 。 与 color 和 background-color 特性 值 类 似 ， 
border-color 特性 值 可 以 是 颜色 名 称 ， 也 可 以 是 rgb 代码 ， 还 可 以 是 一 个 三 位 或 六 位 的 十 六 
进 制 值 数 。 也 可 以 使 用 bordertop-color 、border-right-color 、border-bottom-color 和 
border-left-color 特性 分 别 设置 上 、 右 、 下 和 左边 框 的 颜色 。 


7.2.3 ”盒子 模型 演示 









































以 下 将 通过 在 p 元 素 上 应 用 与 盒子 模型 有 关 的 样式 特性 来 演示 盒子 模型 ， 并 说 明 元 素 
盒子 中 的 内 容 、 填 充 、 边 框 和 边界 。 

【 例 7-1】 演示 盒子 模型 。 具 体 步 骤 如 下 : 

(1) 将 以 下 XHTML 代码 保存 在 7-1.htm 文件 中 。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.0rg/TR/xhtmll/DTD/xhtmll-strict.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 





<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<tit1le> 盒 子 模型 </title> 
<style type="text/css"> 
body { font-size:16px } 
.box { color:red; background-color:yellow; 
padding:40px; border:40px solid blue; margin:40px } 
</style> 
</head> 
<body> 
<div style="border:lpx solid olive; width:352px"> 
<p class="box"> 元 素 的 文字 内 容 </p> 
</div> 
</body> 
</html> 


在 以 上 XHTML 文档 头 部 ， 使 用 style 元 素 定义 了 内 部 样式 表 。 其 中 ， 在 第 1 条 CSS 
规则 中 定义 了 类 型 选择 器 (body)。 按 照 CSS 的 继承 性 ，body 元 素 的 后 代 元 素 div 和 op 都 
会 继承 和 沿用 样式 特性 font-size:16px)。 在 第 2 条 CSS 规则 中 定义 了 类 选择 器 (.box) ， 
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在 该 类 选择 器 后 面 进一步 定义 了 颜色 〈color) 、 背 景 颜色 〈background-color) 、 填 充 
(padding) 、 边 框 (border) 和 边界 (margin) 等 与 盒子 模型 有 关 的 样式 特性 。 其 中 ， 特 性 
声明 (border:40px solid blue) 定义 了 边框 的 宽度 、 样 式 和 颜色 ， 等 价 于 特性 声明 
(border-width:40px: border-style:solid; border-colorblue) 。 

(2) 用 下 浏览 器 打开 XHTML 文档 7-1.htm， 网 页 “表现 ”如 图 7-2 所 示 。 















































图 7-2 在 IE 浏览 器 中 演示 盒子 模型 (p 元 素 盒子 ) 


注意 : 

@ 为 了 说 明和 演示 p 元 素 盒 子 的 边界 ， 在 以 上 XHTML 文档 主体 中 将 p 元 素 谈 套 在 
div 元 素 内 。 因 此 ，div 元 素 和 了 p 元 素 是 父 元 素 和 子 元 素 的 关系 。 同 时 ， 在 div 元 素 的 开始 
标签 中 使 用 style 属性 声明 了 样式 特性 ( border:1px solid olive ) 。 这 样 ， 在 了 P 元 素 盒子 的 边 
界外 可 以 增加 一 个 矩形 框 。 

@ 在 类 选择 器 ( .box ) 对 应 的 特性 声明 中 ， 填 充 (padding ) 、 边 框 (border ) 和 边界 
( margin ) 的 宽度 都 是 40pX。 因 此 ， 在 p 元 素 盒子 中 ， 左 / 右 填 充 、 左 /右边 框 和 左 /右边 界 共 
计 占 用 240px 的 宽度 。 此 外 ，P 元 素 继承 和 沿用 了 其 父 元 素 body 的 样式 特性 
( font-size:16px ) ， 其 中 的 7 个 汉字 “元 素 的 文字 内 容 ” 共 计 占 用 16x7=112px 的 宽度 。 所 
以 ， 整 个 p 元 素 盒子 的 宽度 就 是 240+112=352px。 相 应 地 ， 作 为 了 元 素 的 父 元 素 ，div 元素 
应 用 行内 样式 (width:352px ) 。 这 样 ，div 元 素 盒 子 恰好 容纳 其 中 的 了 元 素 盒子 。 

@ 一 般 情 况 下 ， 与 盒子 模型 相关 的 样式 特性 只 应 用 于 div、p 等 块 级 元 素 上 ， 而 在 
em、strong、a、img 和 span 等 行内 元 素 上 并 不 直接 应 用 这 些 样 式 特性 。 


Ce 元 素 及 其 盒子 在 网 页 中 的 排列 


根据 盒子 模型 及 其 原理 ，HIML 文档 主体 中 的 每 个 元 素 都 被 Web 浏览 器 看 成 一 个 矩 


Non 
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形 盒子 。 在 网 页 中 ， 元 素 及 其 盒子 的 排列 方式 主要 有 三 种 : 正常 流 (Normal Flow) 、 浮 动 
(Float) 和 定位 (Positioning) 。 


7.3.1 正常 流 中 的 元 素 盒子 


默认 情况 下 ， 所 有 元 素 盒子 都 是 在 正常 流 中 排列 的 。 在 正常 流 中 ， 元 素 盒子 在 网 页 
中 的 位 置 是 由 元 素 在 HTML 文档 中 的 位 置 决 定 的 。 具 体 而 言 ， 相 邻 行内 元 素 的 盒子 在 同 
一 行 中 从 左 到 右 依次 排列 ， 相 邻 块 级 元 素 的 盒子 从 上 到 下 依次 排列 ， 其 中 每 个 块 级 元 素 的 
盒子 独占 一 行 ， 如 果 两 个 块 级 元 素 具有 父 元 素 与 子 元 素 的 关系 ， 那 么 父 元 素 盒子 就 包含 子 
元 素 盒子 。 

【 例 7-2】 正常 流 中 的 元 素 盒子 。XHTML 和 CSS 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<title> 正 常 流 中 的 元 素 盒子 </title> 
<style type="text/css"> 
div { padding:10px; border:2px solid red; margin:10px } 
a { padding:5px; border:2px dashed green; margin:5px } 
ul { padding:1l0px; border:2px solid red; margin:1l0px } 
li { padding:5px; border:2px dotted green; margin:5px } 
</style> 
</head> 
<body> 
<div> 
这 是 外 面 的 块 级 div 元 素 〈 父 元 素 ) 盒子 
<a href="#"> 第 1 个 行内 a 元 素 盒子 </a> 
<a href="#"> 第 2 个 行内 a 元 素 盒子 </a> 
</div> 
<ul> 
这 是 外 面 的 块 级 ul 元 素 ( 父 元 素 ) 盒子 
<1i> 这 是 里 面 的 块 级 1i 元 素 (第 1 个 子 元 素 ) 盒子 </1i> 
<1i> 这 是 里 面 的 块 级 1i 元 素 (第 2 个 子 元 素 ) 盒子 </1i> 
<1i> 这 是 里 面 的 块 级 1i 元 素 (第 3 个 子 元 素 ) 盒子 </1i> 
</ul> 
</body> 
</html> 


在 XHTML 文档 的 body 元 素 内 ， 有 一 个 块 级 div 子 元 素 和 一 个 块 级 子 元 素 。 在 块 


级 div 元 素 中 包含 两 个 相 邻 的 行内 a 元素 。 在 块 级 蕊 元 素 中 包含 三 个 块 级 元 素 。 此 外 ， 
块 级 刘 元 素 和 块 级 开元 素 还 定义 了 一 个 无 序列 表 。 
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注意 : 在 Strict 类 型 的 XHTML 文档 中 ，body 元 素 既 不 能 直接 包含 文本 内 容 ， 也 不 能 
直接 包含 a、img 等 行内 元 素 。 


下 浏览 器 打开 XHTML 文档 7-2.htm， 网 页 的 “表现 ”如 图 7-3 所 示 。 
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图 7-3 正常 流 中 的 元 素 及 其 盒子 


其 中 ， 两 个 红色 的 实 线 框 分 别 为 块 级 div 元 素 盒子 和 块 级 册 元 素 盒子 的 边框 。 在 第 1 
个 红色 实 线 框 表示 的 块 级 div 元 素 盒子 中 ， 又 包含 两 个 绿色 虚线 框 表 示 的 行内 a 元 素 盒 
子 ， 并 且 这 两 个 行内 a 元 素 盒子 在 同一 行 中 从 左 到 右 依次 排列 。 在 第 2 个 红色 实 线 框 表示 
的 块 级 蕊 元 素 盒子 中 ， 又 包含 三 个 绿色 点 划 线 框 表 示 的 块 级 下 元 素 盒子 ， 其 中 的 每 个 块 级 
元 素 盒子 独占 一 行 ， 并 且 这 三 个 块 级 五 元 素 盒子 从 上 到 下 依次 排列 。 


7.3.2 元素 盒子 的 浮动 


在 正常 流 中 ， 相 邻 块 级 元 素 的 盒子 都 是 上 下 排列 ， 相 邻 行内 元 素 的 盒子 都 是 左右 排 
列 。 但 在 正常 流 中 ， 元 素 盒子 的 排列 方式 十 分 有 限 ， 大 大 限制 了 网 页 布局 的 灵活 性 。 为 
此 ，CSS 还 允许 使 用 浮动 方法 在 网 页 中 排列 元 素 盒子 。 

默认 情况 下 ， 每 个 元 素 盒子 的 float 特性 值 都 是 none， 也 就 是 元 素 盒子 在 正常 流 中 且 
不 浮动 。 但 是 ， 如 果 将 Hoat 特 性 值 设置 为 left 或 right， 元 素 盒子 就 会 在 其 父 元 素 盒子 内 向 
左 或 向 右 浮动 。 

【 例 7-3】 元 素 盒子 的 浮动 。XHTML 和 CSS 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 


<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<title> 元 素 盒子 的 浮动 </title> 


Np 
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<style type="text/css"> 
ul { list-style:none } 
li { float:left; width:180px; border:lpx solid; } 
</style> 
</head> 
<body> 
<ul> 
<1i> 第 1 个 1i 元 素 盒子 </1i> 
<1i> 第 2 个 1i 元 素 盒子 </1i> 
<1i> 第 3 个 1i 元 素 盒子 </1i> 
</ul> 
</body> 
</html> 


在 XHTML 文 档 头 部 的 内 部 样式 表 中 ， 使 用 类 型 选择 器 (1i) 将 float 特 性 值 设置 为 left， 
且 该 类 型 选择 器 与 主体 中 的 每 个 元 素 相 匹 配 。 因 此 ， 主 体 中 的 三 个 元 素 的 float 特 性 值 
均 为 left。 

用 下 浏览 器 打开 XHTML 文档 7-3.htm， 网 页 的 “表现 ”如 图 7-4 所 示 。 
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由 于 三 个 二 元 素 的 float 特性 值 均 为 left， 所 以 ， 第 1 个 开元 素 盒子 会 在 其 父 元 素 (ul) 
盒子 内 向 左 浮动 。 由 于 第 1 个 元 素 盒子 的 右 侧 还 有 足够 的 空间 ， 所 以 ， 第 2 个 开元 素 盒 
子 也 会 上 浮 到 第 1 个 五 元 素 盒子 所 在 行 ， 并 紧 靠 第 1 个 上 元 素 盒 子 的 右 侧 。 同 理 ， 由 于 第 
2 个 下 元 素 盒子 的 右 侧 也 还 有 足够 的 空间 ， 所 以 ， 第 3 个 工 元素 盒子 也 会 上 浮 到 第 2 个 
元 素 盒子 所 在 行 ， 并 紧 靠 第 2 个 下 元 素 盒子 的 右 侧 。 这 样 ， 三 个 五 元 素 盒子 会 在 同一 行 中 
从 左 向 右 依次 排列 。 


注意 : 

Q@ 在 XHTML 文 档 头 部 的 内 部 样式 表 中 ， 特 性 声明 ( border:1px solid ) 定 义 盒子 的 上 、 
右 、 下 和 左 四 个 边框 的 宽度 均 为 ]px， 且 样式 都 为 实 线 。 

@ 如 图 7-5 (a) 所 示 ， 当 缩 窜 正 浏览 器 窗口 时 ， 由 于 同一 行 的 宽度 过 窄 ， 第 3 个 
元 素 盒子 将 不 能 和 前 两 个 li 元 素 鲍 子 在 同一 行 中 。 如 图 7-5 (b ) 所 示 ， 当 进一步 缩 窄 全 
浏览 器 窗口 时 ， 每 个 贡 元 素 盒子 会 独占 一 行 。 
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(a) 三 个 二 元 素 盒子 排列 在 两 行 上 (b) 三 个 元 素 盒 子 排列 在 三 行 上 
图 7-5 元 素 盒子 的 浮动 


7.3.3 应 用 CSS 和 盒子 浮动 制作 水 平 导航 条 


在 Web 标准 网 页 设计 和 制作 中 ， 使 用 由 、1 和 a 元 素 、 并 应 用 CSS 和 盒子 浮动 ， 可 以 
制作 水 平 导航 条 。 
【 例 7-4】 应 用 CSS 和 盒子 浮动 制作 水 平 导 航 条 。XHTML 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<title> 水 平 导 航 条 </title> 
<style type="text/css"> 
ul { width:450px; margin:0 auto; list-style:none; } 
li { float:left; width:150px; padding:10px 0; background-color:#FAl; 
text-align:center; } 
a { text-decoration:none; color:red; } 
a:hover { color:purple; } 
</style> 
</head> 
<body> 
<ul> 
<1Li><a href="#"> 链 接 1</a></1i> 
<1i><a href="#"> 链 接 2</a></1i> 
<li><a href="#"> 链 接 2</a></1i> 
</ul> 
</body> 
</html> 


在 XHTML 文档 头 部 的 内 部 样式 表 中 ， 使 用 类 型 选择 器 (11) 将 float 特 性 值 设置 为 left。 
所 以 ， 主 体 中 的 每 个 二 元 素 会 在 其 父 元 素 也 盒子 内 向 左 浮动 。 而 在 主体 的 二 元素 中 将 a 元 
素 作为 其 子 元 素 ， 则 可 以 在 无 序列 表 中 创建 文本 超 链 接 。 此 外 ， 在 内 部 样式 表 的 第 4 条 
CSS 规则 中 使 用 了 类 型 选择 器 及 伪 类 (a:hover) ， 这 样 可 以 定义 动态 的 文本 超 链接 一 一 当 
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鼠标 悬 停 在 超 链接 上 时 ， 超 链接 中 的 文本 会 显示 为 紫色 。 
正 浏 览 器 打开 XHTML 文档 7-4.htm， 网 页 的 “表现 ”如 图 7-6 所 示 。 

















/2 水 平 导航 条 一 Windows Internet Explorer 


OO BB] E:\Web Page\exercise\chL 图 


TF k 防 天 | 入 水 平 导航 条 












































图 7-6 使 用 ul、li 和 a 元 素 以 及 盒子 浮动 制作 水 平 导航 条 


在 类 型 选择 器 由 后 面 的 特性 声明 中 ，width 特性 值 为 450px; 在 类 型 选择 器 1 后 面 的 
特性 声明 中 ，width 特性 值 为 150px。 这 样 ，ul 元 素 盒 子 的 内 部 宽度 固定 为 450px， 每 个 1 
元 素 盒子 的 总 宽度 均 为 130px。 所 以 ，ul 元 素 盒子 恰好 可 以 容纳 三 个 开元 素 盒子 。 因 此 ， 
即使 缩 窜 下 浏览 器 窗口 ， 三 个 下 元 素 盒子 始终 在 同一 行 中 。 


注意 : 

Q 在 内 部 样式 表 中 ， 特 性 声明 padding:10px 0 定义 盒子 的 上 和 下 填充 的 宽度 是 
10px， 而 右 和 左 填 充 的 宽度 是 0。 

@ 在 类 型 选择 器 U 后 面 ， 特 性 声明 margin:0 auto 代表 上 、 下 边界 的 宽度 是 0， 而 
右 、 左 边界 的 宽度 可 以 随 正 浏览 器 窗口 宽度 的 变化 而 自动 调整 。 这 样 ， 水 平 导 航 条 始终 
在 下 浏览 器 内 水 平 居中 。 


A div+CSS 网 页 布局 


网 页 布局 是 网 页 设计 与 制作 的 一 项 重要 工作 。 通 过 合理 的 网 页 布局 ， 可 以 将 网 页 中 
的 文字 、 图 像 等 内 容 完 美 、 整 洁 地 展示 在 Web 浏览 器 中 ， 优 化 网 页 “表现” 效果， 甚至 
提高 网 页 的 下 载 速度 。 在 传统 的 网 页 设计 与 制作 中 ， 主 要 采用 表格 布局 方法 ， 即 使 用 
table、tr、td 等 元 素 将 网 页 的 平面 空间 划分 为 不 同 的 矩形 区 域 。 

但 随 着 CSS 技术 的 发 展 、 应 用 和 规范 ，div+CSS 网 页 布局 已 经 成 为 Web 网 页 设计 与 制 
作 的 标准 方法 ， 并 已 经 取代 传统 的 表格 布局 方法 。 在 div+CSS 网 页 布局 中 ， 主 要 使 用 div 
元 素 和 CSS 样式 表 对 网 页 的 平面 空间 进行 分 区 。 

如 图 7-7 所 示 ，id 属性 值 为 wrapper、header、naviBar、mainContent 和 footer 的 五 个 
div 元 素 分 别 定义 了 五 个 盒子 ， 每 个 盒子 占据 网 页 平面 空间 的 一 个 矩形 区 域 。 其 中 ， 
wrapper 盒子 定义 整个 网 页 在 Web 浏览 器 窗口 中 所 占 的 平面 空间 ， 并 且 包含 HTML 文档 主 
体 中 的 所 有 元 素 及 网 页 的 全 部 内 容 。 在 wrapper 盒子 内 ， 从 上 到 下 依次 排列 header、 
naviBar、mainContent 和 footer 四 个 div 元 素 盒 子 。 在 naviBar 盒子 内 ， 又 包含 使 用 UL、L 
和 a 元 素 以 及 盒子 浮动 制作 的 水 平 导航 条 。 
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全 使 用 DIV+CSS 对 网 页 进行 布局 - Windows Internet Explorer 


GO 回 :NEeb Page\exer, 加 la x g 


遍 wx | 大 人 TcSsNRR 人 局 





























Kdiv id "wrapper } 定 义 天 个 网 页 所 瑟 的 平面 至 间 
div 1d "header ”定义 网 页 的 忒 部 


div id "mainContent”) 定 义 网 页 的 主体 部 分 


























div 1d ”footer 定义 网 页 的 底部 

















图 7-7 div+CSS 网 页 布局 之 一 


【 例 7-$】 根 据 图 7-7 中 的 网 页 布局 示意 图 ， 使 用 div+CSS 进行 网 页 布局 。XHTML 代 
码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<title> 使 用 div+css 对 网 页 进行 布局 </title> 
<style type="text/css"> 
#wrapper { width:500px; height:l3em; padding:0; border:lpx solid; 
margin:5px auto; } 
#header { width:450px; height:1lem; border:1px solid; margin:5px auto; } 


#naviBar { width:450px; height:1lem; border:1px solid; margin:5px auto; 
background-color:#FAl; } 

#naviBar ul { width:450px; padding:0; margin:0 auto; list-style:none; } 

#naviBar 1i { float:left; width:150px7 text-align:center; } 

#naviBar a { text-decoration:none; color:red; } 

#naviBar a:hover { color:purple; } 


#mainContent { width:450px; height:6em; border:lpx solid; 
margin:5px auto; } 


#footer { width:450px; height:lem; border:1px solid; margin:S5px auto; } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
id 属性 值 为 wrapper 的 div 元 素 盒子 定义 整个 网 页 所 占 的 平面 空间 
<div id="header">id 属性 值 为 header 的 div 元 素 盒子 定义 网 页 的 头 部 </div> 
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<!--id 属性 值 为 naviBar 的 div 元 素 盒子 定义 网 页 的 水 平 导航 条 --> 
<div id="naviBar"> 
<ul> 
<li><a href="#"> 链 接 1</a></1i> 
<1Li><a href="#"> 链 接 2</a></1i> 
#"> 链 接 3</a></1i> 








<li><a href= 
</ul> 
</div> 


<div id="mainContent">id 属性 值 为 mainContent 的 div 元 素 盒子 定义 网 页 的 主体 部 分 
</div> 


<div id="footer">id 属性 值 为 footer 的 div 元 素 盒子 定义 网 页 的 底部 </div> 
</div> 
</body> 
</html> 


图 7-8 为 另 一 种 常见 的 网 页 布局 。 在 wrapper 盒子 内 ， 从 上 到 下 依次 排列 logo、 
banner、naviBar、mainContent 和 footer 五 个 div 元 素 合子， 在 mainContent 盒子 内 ， 从 左 
到 右 又 并 行 排列 sideBar 和 content 两 个 盒子 。 


/2 使 用 CSS+HDIY 对 网 页 进行 布局 - Windows Internet Explorer 
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div id mainContent > 





div id= sideBar > Kdiv id= content > 





























div jd-footer > 
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每 个 盒子 在 网 页 布局 中 有 着 特定 的 用 途 。 其 中 ，logo 盒子 用 于 设置 网 站 标志 ， 可 以 将 
网 站 标志 图 像 嵌 入 logo 盒子 ;在 banner 盒子 内 放置 广告 或 宣传 图 片 ， 一 般 使 用 GIF 格式 
的 图 像 文 件 ， 可 以 使 用 静态 图 像 ， 也 可 以 用 多 帧 图 像 拼 接 为 动画 图 像 ，naviBar 盒子 包含 
使 用 岂 、li 和 a 元 素 以 及 盒子 浮动 制作 的 水 平 导航 条 ; 在 sideBar 盒子 内 ， 包 含 二 级 导航 
条 ; 网 站 的 主要 内 容 则 组 织 在 content 盒子 内 。 


【 例 7-6】( 上 


页 布 
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ks Web 标准 网 页 设计 举例 


离 ” 的 原则 ， 这 也 是 Web 标准 网 页 设计 的 基本 原则 。 


在 Web 标准 网 页 设计 与 制作 中 ， 


“内 容 和 结构 ”保存 在 XHTML 文档 中 ， 


读者 自己 完成 ) 根据 图 7-8 中 的 网 页 布局 示意 图 ， 使 用 div+CSS 进行 网 
局 ， 并 写 出 XHTML 代码 。 其 他 要 求 如 下 : 

(1) 使 用 内 部 样式 表 。 

(2) 在 Web 浏览 器 中 显示 示意 图 中 的 文本 和 边框 。 


为 了 使 网 页 能 够 在 不 同 Web 浏览 器 中 正常 显示 ， 应 该 遵循 “内 容 和 结构 与 表现 分 


“表现 ” 的 


定义 则 保存 在 CSS 文档 的 外 部 样式 表 中 。 在 XHTML 文档 头 部 ， 使 用 link 元 素 可 以 链接 
CSS 文档 中 的 外 部 样式 表 。 在 XHTML 文档 主体 ， 如 果 元 素 与 外 部 样式 表 中 的 选择 器 及 其 
CSS 规则 匹配 ， 元 素 中 的 内 容 将 按照 CSS 规则 中 的 特性 声明 “表现 ”在 网 页 中 。 


为 标志 


底部 (footer) 五 个 部 分 。 











本 课程 以 HTIL 4. 01、XHTIL 1. 0 和 CSS 2. 1 技术 规范 为 基础 ， 重 点 讲解 基于 XHTIL、CSS 和 DIV 的 Web 标 准 网 


页 设计 原理 和 制作 技术 。 


与 开 孔 相 比 ，XHTIL 的 语法 更 加 规范 和 严复 。 en eh 能 够 “通过 样 
党 效果 。 使 用 XHTIL 和 CSS， 能 够 实现 ,内 容 和 结构 与 表现 
入 中 ， “表现 “的 定义 则 保存 在 CSS 
Ee 
活 的 市 局 ， "Ee 同时 大 大 提高 样式 代码 
的 可 重用 性 ， 并 降低 创建 、 a 


本 课程 能 够 帮助 学 习 者 了 解 Web 标 准 网 页 设计 的 基本 原理 ， 掌 握 XHTIL、CSS 和 DIV 等 最 新 的 网 页 制作 技 
术 ， 为 今后 的 动态 网 页 设计 与 制作 以 及 网 站 开发 与 管理 打下 坚实 的 基础 。 


Cpayright 8 2010-3013 1 网 页 设 六 与 竺 侨 ) 误 娃 建设 小 组 





7-9 使 用 XHTML+div+CSS 技术 制作 的 Web 标准 网 页 


素来 实现 。 通 常情 况 下 ，XHTML 文档 的 主体 通常 具有 以 下 结构 : 





图 7-9 为 使 用 XHTML+div+CSS 技术 制作 的 Web 标准 网 页 。 该 网 页 从 上 到 下 依次 划分 
(logo) 、 横 幅 (banner) 、 水 平 导航 条 (naviBar) 、 主 要 内 容 (mainContent) 和 


标志 (logo) 
横幅 


(banner) 


水 平 导航 条 
(naviBar) 


主要 内 容 


(mainContent) 


底部 


(footer) 


网 页 中 的 每 个 部 分 通常 使 用 CSS 外 部 样式 表 的 ID 选择 器 和 XHTML 文档 中 的 div 元 


03 
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<body> 
<div id="wrapper"> 
<div id="1ogo">…</div> 
<div id="banner">…</div> 
<div id="naviBar">…</div> 
<div id="mainContent">…</div> 
<div id="footer">…</div> 
</div> 
</body> 


其 中 ， 标 志 (logo) 、 横 幅 (banner) 、 水 平 导航 条 (naviBar) 、 主 要 内 容 (mainContent) 
和 底部 (footer) 等 对 应 的 div 元 素 又 包含 在 id 属性 值 为 wrapper 的 div 元 素 内 。 在 id 属性 
值 为 naviBar 的 div 元 素 内 ， 又 可 以 使 用 忆 、1 和 a 元 素 以 及 盒子 浮动 制作 水 平 导 航 条 。 
【 例 7-7】 根据 图 7-9 中 的 网 页 示意 图 ， 使 用 XHTML+div+CSS 技术 设计 Web 标准 网 
页 。 要 求 使 用 XHTML 文档 和 CSS 文档 实现 “内 容 和 结构 与 表现 的 分 离 ”。 
(1) 首先 ， 在 CSS 文档 〈7-7.css) 中 创建 外 部 样式 表 。CSS 代码 如 下 : 


#wrapper { width:780px; margin:0 auto; font-family:STKaiti; } 

















#1ogo { width:760px; height:30px; padding:1l0px; background-color:#cCc; 
font-size:30px; font-family:STHeiti; } 
#banner{ width:780px; height:100px; background-image:url("../ch02/2-4. gif"); } 


#naviBar { width:780px; height:2em; padding:0; background-color:#FAl; } 
#naviBar ul { width:780px; padding:0.5em 0; margin:0 auto; list-style:none; } 
#naviBar 1i { float:left; width:260px; text-align:center; } 

#naviBar a { text-decoration:none; color:red; } 

#naviBar a:hover { color:purple; } 


#mainContent { width:760px; padding:1l0px; background-color:#CFF; } 
.para { text-indent:2em; } 


#footer { width:760px; height:lem; padding:10px; background-color:#FF9; } 
address { text-align:center; } 

在 CSS 文档 中 ，ID 选择 器 要 ogo、#banner、#naviBar、#mainContent 和 #footer 分 别 对 
应 网 页 中 的 标志 (logo) 、 横 幅 (banner) 、 水 平 导航 条 CnaviBar) 、 主 要 内 容 (mainContent) 
和 底部 (footer) 。 

ID 选择 器 #wrapper 对 应 XHTML 文档 主体 中 id 属性 值 为 wrapper 的 div 元 素 。 

类 选择 器 .para 用 于 定义 网 页 主要 内 容 中 文本 的 段落 样式 ， 其 后 的 特性 声明 
text-indent:2em 将 段落 的 首 行 缩 进 设置 为 2em。 

通过 类 型 选择 器 address 定义 的 样式 将 作用 于 网 页 底部 中 的 文本 ， 并 使 文本 水 平 
居中 。 

(2) 然后 ， 在 XHTML 文档 〈7-7.htm) 中 使 用 如 下 代码 : 


<!DOCTYPE html PUBLIC "-//W3C/V/DTD XHTML 1.0 Strict//EN" 
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"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-—strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/zxhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<title> 使 用 XHTML+div+CSS 设计 Web 标准 网 页 </title> 
<link rel="stylesheet" type="text/css" href="7-7.css"/> 
</head> 
<body> 
<div id="wrapper"> 
<div id="1ogo">Web 标准 网 页 设计 原理 与 制作 技术 </div> 
<div id="banner"></div> 


<div id="naviBar"> 
<ul> 
<1i><a href="#"> 课 程 介绍 </a></1i> 
<1i><a href="#"> 课 堂 教学 </a></1i> 
<1i><a href="#"> 学 习 参 考 </a></1i> 
</ul> 
</div> 


<div id="mainContent"> 
<p class="para"> 本 课程 以 HTML 4.01、XHTML 1.0 和 css 2.1 技术 规范 为 基础 ， 
重点 讲解 基于 XHTML、div 和 css 的 Web 标准 网 页 设计 原理 和 制作 技术 。</p> 
<p class="para"> 与 HTML 相 比 ，XHTML 的 语法 更 加 规范 和 严谨 。css 为 网 页 的 样式 
设计 提供 了 灵活 的 手段 ， 能 够 “通过 样式 实现 网 页 的 表现 ”并 使 网 页 “表现 ”出 丰富 的 视觉 效果 。 使 用 
XHTML 和 CSS， 能 够 实现 “内 容 和 结构 与 表现 的 分 离 ”。 在 Web 标准 网 页 设计 与 制作 中 ,“ 内 容 和 结构 ” 
保存 在 XHTML 文档 中 ,“ 表 现 ” 的 定义 则 保存 在 css 文档 中 。 在 XHTML 文档 头 部 ， 使 用 1ink 元 素 可 以 
链接 css 文档 中 的 外 部 样式 表 。 在 XHTML 文档 主体 ， 如 果 元 素 与 外 部 样式 表 中 的 选择 器 及 其 css 规则 
匹配 ， 元 素 中 的 内 容 将 按照 css 规则 中 的 特性 声明 “表现 ”在 网 页 中 。 利 用 qiv+css， 不仅 能 够 对 网 页 
进行 灵活 的 布局 ， 而 且 能 够 统一 网 站 内 网 页 的 设计 风格 ， 同 时 大 大 提高 样式 代码 的 可 重用 性 ， 并 降低 创 
建 、 调 整 和 修改 网 页 的 成 本 。</p> 
<p class="para"> 本 课程 能 够 帮助 学 习 者 了 解 Web 标准 网 页 设计 的 基本 原理 ， 掌 握 
XHTML、div 和 CSS 等 最 新 的 网 页 制作 技术 ， 为 今后 的 动态 网 页 设计 与 制作 以 及 网 站 开发 与 管理 打下 坚 
实 的 基础 。</p> 
</div> 
<div id="footer"> 
<address>Copyright @ 2010-2018 《网 页 设计 与 制作 》 课 程 建设 小 组 </address> 
</div> 
</div> 
</body> 
</html> 


注意 : 
@ 在 CSS 及 其 应 用 中 ，ID 选择 器 和 类 选择 器 似乎 相似 ， 但 两 者 的 用 法 有 较 大 区 别 。 
首先 ， 在 一 个 XHTML 文档 中 ， 同 一 ID 选择 器 只 能 使 用 一 次 ， 而 同一 类 选择 器 可 以 使 用 
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多 次 。 例 如 ， 在 CSS 文档 的 外 部 样式 表 中 ， 既 有 ID 选择 器 圾 ogo 和 #mainContent， 又 有 类 
选择 器 para。 而 在 XHTML 文档 中 ， 只 能 有 一 个 div 元 素 的 id 属性 值 是 logo， 也 只 能 有 一 
个 div 元 素 的 这 属性 值 是 mainContent， 但 可 以 有 三 个 p 元 素 的 class 属性 值 是 para。 其 次 ， 
ID 选择 器 主要 用 于 对 网 页 进行 分 区 和 搭建 网 页 的 大 框架 ， 而 类 选择 器 通常 用 来 定义 细节 
性 的 样式 。 例 如 ， 在 XHTML 文档 中 ，id 属性 值 为 logo 的 div 元 素 定义 了 网 页 的 标志 区 ， 
id 属性 值 为 mainContent 的 div 元 素 定义 了 网 页 的 主要 内 容 区 ， 而 类 选择 器 .para 则 用 于 定 
义 段 落 样式 。 综 上 所 述 ， 相 对 于 类 选择 器 ，ID 选择 器 的 针对 性 更 强 。 

@ 在 XHTML 文档 主体 ， 通 常 将 块 级 元 素 div 用 作 一 个 容器 一 一 在 一 个 div 元 素 中 ， 
既 可 以 包含 行内 元 素 ， 也 可 以 包含 其 他 div 元 素 或 块 级 元 素 。 例 如 ， 在 XHTML 文档 主 
体 ，id 属性 值 为 wrapper 的 div 元 素 是 一 个 最 外 层 的 容器 ， 在 其 中 又 包含 id 属性 值 为 logo、 
banner、naviBar、mainContent 和 footer 的 五 个 div 元 素 。 

图 padding、border 和 margin 特性 的 默认 值 均 是 0。 但 是 ， 只 有 精确 设置 width、 
height、padding、border 和 margin 等 特性 值 ， 才 能 保证 相关 div 元 素 盒 子 之 间 的 无 缝 

例如 ， 在 本 例 中 ，id 属性 值 为 wrapper 的 div 元 素 盒子 的 内 部 宽度 (width ) 是 780px， 
其 直接 包含 的 div 元 素 盒子 的 总 宽度 也 应 该 恰好 为 780pX。 另 一 方面 ， 在 id 属性 值 为 logo 
的 div 元 素 盒子 对 应 的 ID 选择 器 才 ogo 中 ，padding 和 width 的 特性 值 分 别 为 10px 和 760px， 
border 和 margin 特性 的 默认 值 是 0， 因 此 ， 该 div 元 素 盒子 的 总 宽度 就 是 780pxX， 恰 好 占 满 
wrapper 盒子 的 内 部 宽度 。 

又 如 ， 记 属性 值 为 naviBar 的 div 元 素 念 子 以 及 吉 元 素 盒子 的 宽度 ( width ) 都 是 780px。 
另 一 方面 ， 依 据 类 型 选择 器 (1i) 后 面 的 特性 声明 ， 每 个 贡 元 素 的 padding、border 和 margin 
特性 值 都 是 0， 宽 度 ( width ) 都 是 260px。 这 样 ， 三 个 li 元 素 盒 子 的 总 宽度 之 和 就 是 780px， 
恰好 占 满 划 元 素 盒子 的 内 部 宽度 。 


《6' 小 结 


在 HIML 元 素 的 盒子 模型 中 ， 从 里 向 外 依次 是 内 容 、 填 充 、 边 框 和 边界 。 

元 素 及 其 盒子 在 网 页 中 的 排列 方式 主要 有 正常 流 、 浮 动 和 定位 三 种 。 

在 正常 流 中 ， 元 素 盒子 在 网 页 中 的 位 置 是 由 元 素 在 HTML 文档 中 的 位 置 决定 的 。 具 
体 而 言 ， 相 邻 行内 元 素 的 盒子 在 同一 行 中 从 左 到 右 依次 排列 ， 相 邻 块 级 元 素 的 盒子 从 上 到 
下 依次 排列 ， 其 中 每 个 块 级 元 素 的 盒子 独占 一 行 ， 如果 两 个 块 级 元 素 具 有 父 元 素 与 子 元 素 
的 关系 ， 那 么 父 元 素 盒子 就 包含 子 元 素 盒 子 。 

在 HTML 及 XHTML 中 ， 元 素 的 float 特 性 的 默认 值 是 none， 也 就 是 正常 流 情况 。 但 是 ， 
如 果 将 float 特性 值 设置 为 left 或 right， 元 素 盒子 就 会 在 其 父 元 素 盒子 内 向 左 或 向 右 浮 动 。 

在 Web 标准 网 页 中 ， 经 常 使 用 u、1i 和 a 元 素 、 并 应 用 CSS 和 盒子 浮动 技术 制作 水 平 

div+CSS 网 页 布局 已 经 成 为 Web 网 页 设计 与 制作 的 标准 技术 ， 使 用 div 元 素 和 CSS 样 
式 表 能 够 灵活 地 对 网 页 的 平面 空间 进行 分 区 。 
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C&7 习题 


1. 在 [ 例 7-1] 的 XHTML 文档 中 ， 如 果 将 div 元 素 的 开始 标签 及 其 代码 做 如 下 修改 : 





<div style="…width:350px"> 
然后 用 正 浏览 器 打开 该 XHTML 文档 ， 观 察 并 分 析 p 元 素 盒子 及 其 中 内 容 布局 发 生 
的 改变 。 
2. 元 素 盒子 的 精确 嵌 套 。XHTML 文档 的 部 分 代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"/> 
<title> 盒 子 的 嵌 套 </title> 
<style type="text/css"> 
#outer { padding:10px; border:2px solid red; margin:0 auto; 
height:200px; width:300px } 
#inner { padding:10px; border:10px dashed green; margin:30px 10px; 
height: ( Ds width: ) } 
</style> 
</head> 
<body> 
<div id="outer"> 
<div id="inner"></div> 
</div> 
</body> 
</html> 


在 上 述 两 个 空格 中 填 入 相应 的 特性 值 ， 使 id 属性 值 为 inner 的 div 元 素 盒子 在 id 属性 
值 为 outer 的 div 元 素 盒子 内 水 平 居 中 和 垂直 居中 ， 如 图 7-10 所 示 。 
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3. 将 【 例 7-5】 样式 表 中 的 后 代 选 择 器 改写 为 子 元 素 选 择 器 。 
4. 参考 图 7-11 并 修改 【 例 7-5】 中 的 XHTML 文档 ， 使 用 div+CSS 技术 布局 网 页 。 
/ 信 使用 div+C55 对 网 页 进行 布局 - Windows Internet Explorer 加 回国 | 
华 贸 物流 认购 倍数 


























加 z: Yeb Page\exer' 轿 











遍 收 训 天。 | 乱 使 用 dvtcss 对 网 页 进行 布局 





图 7-11 网 页 布局 示意 图 


5. 参考 图 7-12， 使 用 div+CSS 技术 布局 网 页 。 
辐 回忆 
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图 7-12 更 复杂 的 网 页 布局 
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6. 按照 图 7-13 中 的 网 页 示意 图 ， 并 按照 图 中 标示 的 要 求 、 使 有 
术 设 计 Web 标准 网 页 。 其 他 要 求 : 
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图 7-13 ”Web 标准 网 页 示意 图 


(1) 标志 (logo) 中 的 文本 水 平 居中 。 

(2) 使 用 XHTML 文档 和 CSS 文档 实现 “内 容 和 结构 与 表现 的 分 离 ”。 

(3) 重新 制作 交替 切换 和 显示 的 GIF 动画 图 片 ， 并 使 其 恰好 占 满 横幅 (banner) 的 平 
gz 间 。 





使 用 人 设计 和 制作 网 页 


Dreamweaver 是 一 款 专 业 的 网 页 设计 和 制作 软件 。 使 用 Dreamweaver， 不 仅 可 以 快速 
地 创建 CSS 文档 及 其 中 的 样式 表 ， 而 且 能 够 轻松 地 创建 、 编 辑 XHTML 文档 并 应 用 CSS 
文档 中 的 样式 。 


6 Dreamweaver 软件 的 工作 界面 


如 图 8-1 所 示 ，Dreamweaver 软件 的 工作 界面 由 菜单 栏 、 面 板 组 、 属 性 检查 器 和 文档 
窗口 等 组 成 。 


插入 栏 文档 工具 栏 文档 窗口 面板 组 
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1. 菜单 栏 

菜单 栏 位 于 Dreamweaver 窗口 的 上 方 ， 包 括 文件 、 编 辑 、 查 看 、 插 入 、 修 改 、 文 本 、 
命令 、 站 点 、 窗 口 和 帮助 等 菜单 。 每 个 菜单 又 包含 一 组 功能 相关 的 命令 。 

选择 “窗口 ”菜单 中 的 命令 ， 可 以 打开 相应 的 面板 、 检 查 器 和 窗口 。 

2. 插入 栏 

插入 栏 包含 用 于 将 各 种 类 型 的 “对 象 ”( 如 超 链接 、 表 格 和 图 像 ) 插入 XHTML 文档 
的 按钮 。 插 入 的 每 个 对 象 都 对 应 一 段 HTML 代码 ， 并 允许 在 插入 对 象 时 设置 相应 元 素 的 
属性 。 例 如 ， 在 插入 栏 中 单 击 “ 表 格 ” 按 钮 ， 可 以 插入 一 个 表格 。 也 可 以 使 用 “插入 ” 菜 
单 插入 某 些 对 象 。 

3. 文档 工具 栏 

文档 工具 栏 包含 各 种 按钮 ， 能 够 提供 XHTML 文档 的 三 种 视图 (如 “设计 ”视图 和 
“代码 ”视图 )、 各 种 查看 选项 和 一 些 常 用 操作 (如 在 Web 浏览 器 中 预览 XHTML 文档 ) 。 

4. 文档 窗口 

文档 窗口 显示 当前 创建 和 编辑 的 CSS 文档 或 XHTML 文档 。 

5.“ 属 性 ”面板 

“属性 ”面板 用 于 查看 、 设 置 和 修改 所 选 对 象 或 文本 的 各 种 属性 。 每 种 对 象 都 具有 不 
同 的 属性 。 

6. 标签 选择 器 

标签 选择 器 位 于 文档 窗口 底部 的 状态 栏 中 ， 显 示 环 绕 当 前 选 定 内 容 的 标签 的 层次 结 
构 。 单 击 该 层次 结构 中 的 任何 标签 可 以 选择 该 标签 及 其 全 部 内 容 。 

7. 面板 组 

面板 组 是 组 合 在 一 个 标题 下 面 的 相关 面板 的 集合 。 若 要 展开 一 个 面板 组 ， 可 以 单 击 
组 名 称 左 侧 的 展开 箭头 ; 若 要 取消 停靠 一 个 面板 组 ， 可 以 拖 动 该 组 标题 条 左边 缘 的 手柄 。 

8. 文件 面板 

文件 面板 用 于 管理 文件 和 文件 夹 。 类 似 于 Windows 资源 管理 器 ， 通 过 文件 面板 可 以 
访问 本 地 磁盘 上 与 网 站 有 关 的 各 种 文件 。 




















2 使 用 Dreamweaver 创建 CSS 文档 


使 用 Dreamweaver， 可 以 快速 地 创建 、 编 辑 CSS 文档 及 其 中 的 外 部 样式 表 。 

【 例 8-1】 使 用 Dreamweaver 创建 CSS 文档 〈6-$.css) 及 其 中 的 样式 表 。 有 具体 步骤 
如 下 : 

(1) 新 建 CSS 文档 。 进 入 Dreamweaver 后 ， 在 菜单 栏 中 选择 “文件 ”|“ 新 建 ” 命 令 ， 
会 弹出 “新 建文 档 ” 对 话 框 。 如 图 8-2 所 示 ， 在 “新 建文 档 ” 对 话 框 的 “类 别 ” 列 表 中 选 
择 “ 基 本 页 ”， 在 “基本 页 ”列表 中 选择 CSS。 然 后 ， 单 击 “创建 ”按钮 ， 即 可 新 建 CSS 
文档 ， 并 打开 “文档 ”窗口 。 
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新 建文 类 




















图 8-2 在 “新 建文 档 ” 对 话 框 中 创建 CSS 文档 


(2) 创建 类 型 选择 器 及 其 CSS 规则 。 如 图 8-3 所 示 ， 外 部 样式 表 出 现在 文档 窗口 中 。 
在 文档 工具 栏 中 ，“ 拆 分 ”视图 和 “设计 ”视图 按钮 已 被 禁用 。 因 此 ， 在 文档 窗口 中 只 能 
通过 “代码 ”视图 创建 和 编辑 CSS 规则 。 

如 图 8-3 所 示 ， 在 CSS 面板 的 右 下 角 单 击 “ 新 建 CSS 规则 ”按钮 ， 会 弹出 “新 建 CSS 
规则 ”对 话 框 。 在 “新 建 CSS 规则 ”对 话 框 中 ， 首 先 在 “选择 器 类 型 ”选项 组 中 选择 
“标签 ”， 然 后 从 “标签 ”下 拉 列 表 框 中 选择 HTML 元 素 hl， 最 后 单 击 “ 确 定 ” 按 钮 。 
这 时 ， 会 弹出 “hl 的 CSS 规则 定义 ”对 话 框 。 
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图 8-3 ”创建 类 型 选择 器 及 其 CSS 规则 


(3) 设置 样式 特性 值 。 如 图 8-4 (a) 所 示 ， 在 “hl 的 CSS 规则 定义 ”对 话 框 中 ， 样 
式 特性 分 为 类 型 、 背 景 、 区 块 、 方 框 、 边 框 、 列 表 、 定 位 和 扩展 八 个 类 别 。 通 过 该 对 话 
框 ， 可 以 设置 CSS 规则 中 的 样式 特性 以 及 对 应 的 特性 值 。 
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如 图 8-4 (a) 所 示 ， 在 “hl 的 CSS 规则 定义 ”对 话 框 中 ，“ 分 类 ”列表 中 自动 选 定 
“类 型 ”。 此 时 ， 在 该 对 话 框 的 右边 ， 将 字体 颜色 的 特性 (color) 值 设 置 为 红色 (Red) 。 
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(a) 设置 字体 颜色 特性 (b) 设置 文本 对 齐 特 性 





图 8-4 设置 CSS 规则 中 的 样式 特性 以 及 对 应 的 特性 值 

如 图 8-4(b) 所 示 ， 在 “hl 的 CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 中 选 定 “ 区 块 ”， 
再 在 该 对 话 框 的 右边 将 文本 对 齐 的 特性 (text-align) 值 设置 为 居中 (center) 。 然 后 ， 单 击 
“确定 ”按钮 ， 即 可 在 文档 窗口 中 自动 创建 如 下 的 CSS 代码 : 

hl { color:Red; text-align:center } 

注意 : 在 Dreamweaver 中 ， 标 签 选择 器 即 是 CSS 2.1 规范 中 定义 的 类 型 选择 器 。 

(4) 使 用 CSS 面板 向 CSS 规则 添加 特性 声明 。 如 图 8-5 所 示 ， 在 CSS 面板 中 ， 首 先 
在 “所 有 规则 ”中 选择 hl， 然 后 在 “hl 的 属性 ”中 将 字符 间距 特性 〈letter-spacing) 值 设 
置 为 lem， 即 可 向 类 型 选择 器 hl 对 应 的 CSS 规则 添加 特性 声明 。 























图 8-5 使 用 CSS 面板 向 CSS 规则 添加 特性 声明 
此 时 ， 文 档 窗口 中 的 CSS 代码 如 下 : 


hl { text-align:center; color:Red; letter-spacing:lem } 
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(5) 继续 在 CSS 文档 中 创建 CSS 规则 。 按 照 步骤 (2) 一 〈4) 中 的 操作 方法 ， 创 建 
如 下 完整 的 CSS 代码 : 

body { background-color:Silver } 

hl { text-align:center; color:Red; letter-spacing:lem } 

h2 { text-align:center } 


.Zhengwen { text-align:center; color:Blue; font-weight:bolder } 


(6) 保存 CSS 文档 及 其 中 的 样式 表 。 在 菜单 栏 中 选择 “文件 ”|“ 保 存 ” 命 令 ， 在 弹 
出 的 “另存 为 ”对 话 框 中 选 定 保存 CSS 文档 的 文件 夹 并 指定 文件 名 8-1.css。 然 后 ， 单 击 
“保存 ”按钮 ， 即 可 保存 CSS 文档 及 其 中 的 样式 表 。 

在 上 述 步骤 (3) 的 “CSS 规则 定义 ”对 话 框 中 ， 样 式 特性 被 分 为 类 型 、 背 景 、 区 块 、 
方 框 、 边 框 、 列 表 、 定 位 和 扩展 等 八 个 类 别 。 通 过 该 对 话 框 ， 可 以 设置 CSS 规则 中 的 样 
式 特性 以 及 对 应 的 特性 值 。 以 下 主要 介绍 前 面 几 类 样式 特性 。 

(1) 类 型 特性 。 

如 图 8-6 所 示 ， 类 型 特性 用 来 对 网 页 中 文本 的 字体 (font-family) 、 大 小 (font-size) 、 
样式 〈font-style) 、 行 高 (line-height) 、 修 饰 (text-decoration) 、 粗 细 (〈font-weight) 和 
颜色 〈color) 等 特性 进行 设置 。 














body 的 C55 规则 定义 


区 块 字体 @E); B 
| 大 小 区 ): font-size 细 QD): 
font-style 式 台 ): | 仿 有 变 体 公 : 
行 高 CL): 进去 3 E): 















































图 8-6 ”类 型 特性 


(2) 背景 特性 。 

背景 特性 主要 作用 于 body、table 和 div 等 结构 性 和 块 级 元 素 。 如 图 8-7 所 示 ， 常 用 的 
背景 特性 有 背景 颜色 (background-color) 和 背景 图 像 (background-image) 。 

(3) 区 块 特性 。 
区 块 特性 用 来 对 文本 中 的 单词 间距 (word-spacing) 、 字 和 母 间 距 (letter-spacing) 、 垂 
直 对 齐 (vertical-align) 、 文 本 对 齐 (text-align) 、 文 字 缩 进 (text-indent) 和 显示 (display) 
等 特性 进行 设置 。 常 见 的 区 块 特性 如 图 8-8 所 示 。 
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body 的 C55 规则 定义 


background-color 





背景 颜色 (C); 


背景 图 像 I): |images/bkIna&e. jp 汪 [ 浏览. ] 
重复 @B): 本 
附件 四: background-image 



































0 
水 平 位 置 到 ) : ba 
垂直 位 置 们 ; 

















[本 用 名 ] [和 











图 8-7 背景 特性 


单词 间距 @) : ~ 


字母 间距 L): 辣 | 字体 高 (m) 国 


文本 对 齐 (0): [ 丰 ”” 国 | 
文字 缩 进 这 ) : 

空格 他 ): 

显示 四 ): 


hl 的 C55 规则 定义 

















letter-spacing 
































[确定 ] 取消 应 用 心 ) 帮助 





图 8-8 区 块 特性 


(4) 方 框 特性 。 

方 框 特性 主要 作用 于 div 元 素 及 其 盒子 。 如 图 8-9 所 示 ， 常 用 的 方 框 特性 有 宽度 
(width) 、 高 度 (height) 、 浮 动 (float) 、 填 充 (padding) 和 边界 (margin)〉 等 。 

注意 : 

CD padding 特性 又 可 细 分 为 padding-top 、padding-right 、 padding-bottom 和 
padding-left. 

@) margin 特性 又 可 细 分 为 margin-top、margin-right、margin-bottom 和 margin-left。 
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div 的 C55 规则 定义 
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司 | 售 志 cm 加 





























伪 素 @x， 加 | 
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取消 ”] [应 用 @，] [项 助 








图 8-9 方 框 特性 


(5) 边框 特性 。 
和 方 框 特性 类 似 ， 边 框 特性 也 主要 作用 于 div 元 素 及 其 盒子 。 如 图 8-10 所 示 ， 常 用 的 
边框 特性 有 边框 样式 (border-style) 、 边 框 宽度 (border-width) 和 边框 颜色 (border-color) 


等 特性 。 
样式 M 颜色 


全 部 相同 G) ” 回 ] 全 部 相同 到 ) 全 部 相同 @) 


甸 像素 (px 


div 的 C55 规则 定义 
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border-color 
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8-10 ”边框 特性 


63 使 用 Dreamweaver 创建 XHTML 文档 

















熟练 使 用 Dreamweaver， 可 以 轻松 地 创建 XHTML 文档 ， 并 高 效 地 设计 和 制作 网 
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页 。 

【 例 8-2】 使 用 Dreamweaver 创建 XHTML 文档 (6-5.htm) 。 具 体 步 又 如 下 : 

(1) 新 建 XHTML 文档 。 进 入 Dreamweaver 后 ， 在 菜单 栏 中 选择 “文件 ”|“ 新 建 ” 
命令 ,会 弹出 “新 建文 档 ” 对 话 框 。 如 图 8-11 所 示 ， 在 “新 建文 档 ” 对 话 框 的 “类 别 ” 
列表 框 中 选择 “基本 页 ”， 在 “基本 页 ”列表 框 中 选择 HIML， 在 “文档 类 型 ”下 拉 列 表 
框 中 选择 XHTML 1.0 Strict。 然 后 ， 单 击 “ 创 建 ” 按 钮 ， 即 可 新 建 XHTML 文档 ， 同 时 打 


开 文 档 窗口 。 











入 门 页 面 
页 面 设计 ( 有 辅助 功能 的 ? 





文档 类 型 DTD) 


























8-11 ”在 “新 建文 档 ” 对 话 框 中 创建 XHTML 文档 
如 图 8-12 所 示 ， 在 文档 窗口 中 ，Dreamweaver 会 自动 生成 文件 类 型 定义 以 及 有 关 
html、head、meta、title 和 body 等 HTML 元 素 的 代码 ， 这 些 代码 构成 了 Strict 类 型 的 
XHTML 文档 的 基本 结构 。 


Macromedia Dreanweaver 8 — [E:\¥eb Page\exercise\ch08\8-1.hta (XHTRL)*] 
文件 对) 编辑 区 ) 查看 吕 插入 I) 修改 员 文本 (I) 命令 CC) 站 点 GE) 窗口 和 帮助 0D 
凡 加 名 | 国 四 国 - 贸 - 后 凡 昌 | 国 - 兄 


Ce pe te .| C EL, | [Em [aa 








<IDOCTYPE html PUBLIC “-//W3C//DID XHTML 1.0 Strict//EN™ 
“http:/Vwww. w3. org/TR/xhtml1/DTD/xhtnl1l-strict. dtd”> 
<htnl xnlns="http://www. w3. org/1999/xhtnl”> 


-一 pe—eontent="text/htnl; charset=gb2312”/> 
aver 创 建 XHTIL 文 档 </ 访 tle> 
K/head> 

















8-12 ”设置 网 页 标题 


(2) 设 置 网 页 标题 。 如 图 8-12 所 示 ， 在 文档 工具 栏 的 “标题 ”文本 框 中 输入 文本 “使 
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用 Dreamweaver 创建 XHTML 文档 ”， 然 后 按 回 车 键 〈 即 Enter 键 ) 即 可 设置 网 页 标题 。 

(3) 保存 XHTML 文档 。 在 菜单 栏 中 选择 “文件 ”|“ 保 存 ” 命 令 ， 在 弹出 的 “另存 
为 ”对 话 框 中 选 定 保存 XHTML 文档 的 文件 夹 ， 并 指定 XHTML 文档 的 文件 名 8-2.htm。 然 
后 ， 单 击 “保存 ”按钮 ， 即 可 保存 XHTML 文档 及 其 中 的 HTML 代码 。 

(4) 切换 到 XHTML 文档 的 “ 拆 分 ”视图 。 在 Dreamweaver 窗口 中 ，XHTML 文档 有 
三 种 视图 一 一 “代码 ”“ 设 计 ” 和 “ 拆 分 ”视图 。 在 “代码 ”视图 中 可 以 直接 编辑 和 显示 
HTML 代码 。“ 设 计 ” 视 图 是 一 个 可 视 化 的 网 页 设计 和 制作 环境 ， 在 其 中 会 显示 类 似 在 
Web 浏览 器 中 看 到 的 内 容 。 在 “ 拆 分 ”视图 中 能 够 同时 看 到 XHTML 文档 的 “代码 ”和 
“设计 ”视图 。 在 Dreamweaver 窗口 的 文档 工具 栏 中 单 击 “ 拆 分 ”按钮 ， 即 可 切换 到 
XHTML 文档 的 “ 拆 分 ”视图 。 

(5) 链接 外 部 样式 表 。 如 图 8-13 所 示 ， 在 CSS 面板 的 右 下 角 单 击 “附加 样式 表 ” 按 
钮 ， 会 弹出 “链接 外 部 样式 表 ” 对 话 框 。 在 “链接 外 部 样式 表 ” 对 话 框 中 ， 单 击 “ 浏 览 ” 
按钮 。 在 弹出 的 “选择 样式 表 文 件 ” 对 话 框 中 选择 CSS 文档 〈8-1.css) ， 单 击 “ 确 定 ” 按 
钮 ， 即 可 返回 “链接 外 部 样式 表 ” 对 话 框 。 在 “链接 外 部 样式 表 ” 对 话 框 中 ， 单 击 “ 确 
定 ” 按 钮 ， 即 可 在 XHTML 文档 头 部 自动 生成 link 元 素 及 其 代码 。 这 样 ， 在 XHTML 文档 
(8-1.htm〉 中 即 可 链接 CSS 文档 〈8-1.css) 中 的 外 部 样式 表 。 

在 Dreamweaver 窗口 右边 的 CSS 面板 中 ， 可 以 看 到 外 部 样式 表 中 的 三 个 类 型 选择 器 
(body、hl1、h2) 和 一 个 类 选择 器 (.zhengwen) 。 























| @ 指 定 外 部 样式 表 所 



































在 的 CSS 文档 
OSAD 
: 加 
悠 也 可 忆 输 入 到 分 隔 的 妈 传 类 到 列表 。 @D 单 击 “ 附 加 样 
式 表 ” 按 钮 


8-13 ”链接 外 部 样式 表 


(6) 在 XHTML 文档 主体 输入 文本 内 容 。 首 先 ， 切 换 到 “设计 ”视图 ， 并 在 文档 窗口 
底部 的 标签 选择 器 中 选择 body 标签 。 然 后 ， 在 “设计 ”视图 中 输入 如 下 文本 : 

静夜 思 唐 . 李 白 床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明月 ， 低 头 思 故 乡 。 【 简 析 】 这 是 写 
远 客 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 它 不 追求 想象 的 
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新 颖 奇特 ， 也 握 弃 了 辞藻 的 精工 华美 : 它 以 清新 朴素 的 笔触 ， 打 写 了 丰富 深 曲 的 内 容 。 境 
是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 怪 乎 有 人 鞠 它 是 “ 妙 绝 
击 李 ”。 

在 “代码 ”视图 中 可 以 看 到 ， 这 些 文本 将 位 于 body 元 素 的 开始 标签 和 结束 标签 
之 间 。 

(7) 在 文本 内 容 上 应 用 类 型 选择 器 对 应 的 CSS 规则 及 其 样式 。 如 图 8-14 所 示 ， 首 
先 ， 在 “代码 ”视图 中 选中 文本 “静夜 思 ”。 然 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “插入 
标签 ”命令 ， 会 弹出 “标签 选择 器 ”对 话 框 。 在 “标签 选择 器 ”对 话 框 的 左边 列表 中 选择 
“HTML 标签 ”， 再 在 右边 列表 中 双击 “hl ”， 会 弹出 “标签 编辑 器 ”对 话 框 。 在 “标签 
编辑 器 ”对 话 框 中 单 击 “ 确 定 ” 按 钮 ， 即 可 在 文本 “静夜 思 ” 两 端 添加 元 素 hl 的 开始 标 
签 和 结束 标签 ， 同 时 关闭 “标签 编辑 器 ”对 话 框 。 这 样 ，XHTML 文档 主体 中 的 文本 “ 静 
夜 思 ” 即 可 应 用 类 型 选择 器 (hl ) 对 应 的 CSS 规则 (hl { text-align:center; color:Red; 
letter-spacing:lem } ) 及 其 中 的 样式 。 
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8-14 ”在 文本 内 容 上 应 用 类 型 选择 器 及 其 样式 


返回 “标签 选择 器 ”对 话 框 后 ， 单 击 “ 关 闭 ” 按 钮 ， 即 可 关闭 “标签 选择 器 ”对 
话 框 。 

按照 类 似 的 操作 方法 ， 在 文本 “ 唐 . 李 白 ” 上 应 用 类 型 选择 器 (h2) 对 应 的 CSS 规则 
(h2 { text-align:center } ) 及 其 中 的 样式 。 

(8) 在 文本 内 容 上 应 用 类 选择 器 对 应 的 CSS 规则 及 其 样式 。 首 先 ， 在 “代码 ”视图 中 
选中 文本 “ 床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明月 ， 低 头 思 故 乡 。”。 然 后 右 击 ， 在 弹出 
的 快捷 菜单 中 选择 “插入 标签 ”命令 ,会 弹出 “标签 选择 器 ”对 话 框 。 在 “标签 选择 器 ” 
对 话 框 的 左边 列表 中 选择 “HTML 标签 ”， 再 在 右边 列表 中 双击 “p”， 会 弹出 “标签 编 
辑 器 ”对 话 框 。 如 图 8-15 所 示 ， 在 “标签 编辑 器 ” 对 话 栓 的 左 侧 列 表 中 选择 “样式 表 / 辅 
助 功能 ”， 然 后 在 右 侧 的 “类 ”文本 框 中 输入 zhengwen， 最 后 单 击 “ 确 定 ” 按 钮 ， 即 可 








MW Web 标准 网 页 设计 原理 与 前 端 开 发 技术 











在 选中 文本 的 两 端 添 加 元 素 p 的 开始 标签 和 结束 标签， 具体 代码 如 下 : 
<p class="zhengwen"> 床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明 月 ， 低 头 思 故 乡 。</pP> 





标签 编辑 器 - p 


常规 全 | 。- 样式 表 / 畏 助 功能 
样式 表 /辅助 功能 



































onDblClick 
onllouseDown 
onllousetp 











图 8-15 在 文本 内 容 上 应 用 类 选择 器 及 其 样式 


这 样 ， 即 可 在 文本 内 容 上 应 用 类 选择 器 (.zhengwen) 对 应 的 CSS 规则 及 其 样式 。 

(9) 在 XHTML 文档 中 添加 元 素 标 签 。 如 图 8-16 所 示 ， 与 步骤 (7) 和 (8) 的 操作 方 
法 类 似 ， 在 XHTML 文档 中 插入 空 元 素 br 的 开始 标签 <br> 以 及 与 “ 简 析 ”对 应 的 p 元 素 
的 开始 标签 <zp> 和 结束 标签 </p>。 


上 @ Hacrnoaedia Dreanweaver 8 — [FE:\W¥eh Page\exercise\chN8\8-1.htm (XHTHT.)] 


文件 @ 编辑 到 ) 查看 W) 插入 CD) 修改 如 文本 加) 命令 C) 站 点 G) 窗口 中 怖 助 00 
全 > 轧 回 电 | 困 国 国 -和 看 -前 晶 思 | 国 - 遇 








1 回 人 园 拓 | 国 设 H| 标题: 后 reveeveglnm Tp 时 cH 全 os 


请 单 击 “ 





低头 思 故 乡 。 


【 阐 析 】 这 是 马 远 客 因 乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 雕琢 出 明 静 醉人 的 司 

秋 夜 的 意境 。 人 也 握 齐 了 辞藻 的 精工 华美 ， 它 以 清 

人， 抒写 了 丰富 深 曲 的 内 容 。 境 是 境 ， 情 是 情 ， J 那么 
百 读 不 大 ， Et 无 怪 乎 有 人 赞 它 是 “ 除 绝 古今 ” 











图 8-16 在 XHTML 文档 中 添加 元 素 标签 


(10) 验证 标记 。 如 图 8-17 所 示 ， 在 文档 工具 栏 中 单 击 “ 验 证 标记 ”按钮 ， 并 在 下 拉 
菜单 中 选择 “验证 当前 文档 ”命令 ， 将 在 Dreamweaver 窗口 下 方 的 结果 面板 中 显示 标记 验 


结果 。 通 过 验证 标记 ， 可 以 检查 XHTML 文档 中 是 否 存在 语法 不 规范 的 代码 。 
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cromedia Dreanweaver 8 — [E:\¥eb Page\exercise\ch08\8-1.hta (XHTML)] 
文件 四 编辑 下 ) 查看 WV) 插入 I) 修改 人 文本 CD) 命令 ECE) 站 点 G) 窗口 如 帮助 0 

















Ce Ei 


浏览 蜡 下 预 电 站 周 试 


2 于 ， 李白 drh2y 
Cp class="zhengyel 
前 明月 光 ， Be. br/> 
举 头 望 明月 ， 低 头 思 
/p> 
n> 











图 8-17 验证 标记 


(11) 在 Web 浏览 器 中 预览 网 页 。 如 图 8-17 所 示 ， 在 文档 工具 栏 中 单 击 “在 浏览 器 中 
预览 /调试 ”按钮 ， 可 以 启动 Web 浏览 器 并 在 其 中 预览 XHTML 文档 的 显示 效果 。 

(12) 保 存 XHTML 文档 。XHTML 文档 通过 验证 标记 和 预览 后 ， 在 菜单 栏 中 选择 “ 文 
件 ”| “保存” 命令 ， 即 可 保存 XHTML 文档 及 其 最 终 的 HTML 代码 。 


Dreamweaver 为 实现 “内 容 和 结构 与 表现 的 分 离 ” 提 供 了 有 效 工具 。 

使 用 Dreamweaver， 可 以 轻松 地 创建 、 编 辑 和 修改 CSS 和 XHTML 文档 。 

Dreamweaver 具有 可 视 化 编程 功能 。 在 Dreamweaver 中 通过 鼠标 操作 或 选择 菜单 命 
令 ， 能 够 在 CSS 和 XHTML 文档 中 自动 和 快速 地 生成 相应 的 代码 。 

使 用 Dreamweaver， 不 仅 能 够 在 XHTML 文档 中 方便 地 链接 CSS 文档 中 的 外 部 样式 
表 ， 而 且 可 以 轻松 地 应 用 外 部 样式 表 中 的 CSS 规则 及 其 样式 。 


1. 使 用 Dreamweaver 创建 【 例 7-7】 中 的 CSS 文档 〈7-7.css) 及 其 中 的 外 部 样式 表 。 
2. 使 用 Dreamweaver 创建 【 例 7-7】 中 的 XHTML 文档 〈7-7.htm) ， 并 应 用 习题 1 
的 CSS 文档 中 的 样式 。 








使 用 Dreamweaver 建设 网 站 


本 章 将 以 “Web 标准 网 页 设计 原理 与 前 端 开发 技术 ”课程 网 站 为 例 简要 说 明 网 站 建设 
的 一 般 过 程 。 


人 网 站 规划 与 功能 定位 


在 网 站 中 ， 既 可 以 使 用 静态 网 页 向 外 界 发 布 信息 、 实 现 信息 的 单 向 流动 ， 也 可 以 通 
过 动态 网 页 与 网 站 访问 者 进行 互动 、 实 现 信 息 的 双向 流动 。 

通过 本 章 的 课程 网 站 建设 ， 主 要 实现 以 下 四 项 功能 : 

(1) 课 程 介绍。 此 项 功能 将 以 文字 形式 描述 Web 标准 网 页 的 基本 设计 原理 和 关键 制作 
技术 。 在 基本 设计 原理 中 强调 “内 容 和 结构 与 表现 的 分 离 ”， 关 键 制作 技术 则 包括 语法 严 
谨 的 XHTML、 保 存 外 部 样式 表 的 CSS 文档 和 基于 div+CSS 的 网 页 布局 。 

(2) 课件 下 载 。 为 了 方便 学 生 课 前 预习 和 课 后 复习 教学 内 容 ， 准 备 将 各 章 的 教学 课件 
上 传 课程 网 站 ， 以 供 学 生 下 载 。 

(3) 学 习 指 南 。 为 了 指导 学 生 课 下 及 今后 的 进一步 学 习 ， 将 向 学 生 提供 相关 的 开放 式 
课程 网 站 及 其 网 址 。 

(4) JavaScript 演示 。 此 项 功能 将 演示 使 用 JavaScript 编程 实现 的 表单 验证 。 

上 述 四 项 功能 将 使 用 静态 网 页 实现 ， 并 分 别 对 应 “课程 介绍 ”“ 课 件 下 载 ”“ 学 习 
指南 ”和 “JavaScript 演示 ”四 个 静态 网 页 。 


@2” 创建 本 地 站 点 


网 站 又 称 站 点 。 站 点 通常 分 为 两 种 ， 一 种 是 远程 站 点 ， 另 一 种 是 本 地 站 点 。 远 程 站 
点 是 指 可 以 通过 互联 网 访问 的 站 点 ， 这 种 站 点 中 的 各 种 文件 都 存储 在 互联 网 的 服务 器 上 。 
但 直接 在 服务 器 上 创建 或 者 测试 远程 站 点 会 有 很 多 困难 。 所 以 ， 通 常 先 在 本 地 计算 机 上 创 
建站 点 ， 完 成 站 点 创建 、 建 设 和 测试 后 ， 再 通过 FTP 工具 将 这 个 站 点 及 其 中 的 各 种 文件 上 
传 到 服务 器 ， 这 种 在 本 地 计算 机 上 创建 的 站 点 就 称 为 本 地 站 点 。 

在 Dreamweaver 中 ， 使 用 向 导 可 以 轻松 地 创建 本 地 站 点 。 

【 例 9-1】 创建 名 称 为 courseWebsite 的 本 地 站 点 。 具 体 步骤 如 下 : 
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(1) 设 置 站 点 名 称 。 进 入 Dreamweaver 后 ， 在 菜单 栏 中 选择 “站 点 ”|“ 新 建站 点 ”命令 。 
如 图 9-1 所 示 ， 在 弹出 的 新 建站 点 向 导 的 第 1 步 对 话 框 中 ， 设 置 站 点 名 称 为 courseWebsite。 然 
后 ， 单 击 “ 下 一 步 ”按钮 。 


coursccbsite 的 站 点 定义 为 


er 中 鸭 站 点 是 立 件 和 立 件 颊 的 生 语 ， 户 对 应 于 服务 强 上 的 Web 








示例 : hetp: /fw myHost eon/mySite 


加 轨 术 和 因 EF1 本 半生 生 避 各 党 才 滑 相 加 全 全 汪 三 接 三 生 妆 如 虹 条 状 天 二 -二 
医 一 所 ap > 取消 项 助 











图 9-1 设置 站 点 名 称 


(2) 设置 是 否 使 用 服务 器 技术 。 如 图 9-2 所 示 ， 在 新 建站 点 向 导 的 第 2 步 对 话 框 中 ， 
选择 “和 否 ， 我 不 想 使 用 服务 器 技术 ” 单 选 按钮 ， 然 后 单 击 “ 下 一 步 ” 按 钮 。 


courseWebsite 的 站 点 定义 为 








篇 辑 文件 ,第 2 部 分 


您 是 否 打算 使 用 服务 器 技术 ,如 ColdFusion、ASP. NET、ASP、JSP 或 PHP? 


不 得 入 用 服 共 天 技术 < 而 
本 是 ,我 起 使 用 服务 器 技术 。0) 





CE 上] = 区 加 相 [ 卫 消 和 





图 9-2 选择 “不 使 用 服务 器 技术 ” 





(3) 设置 本 地 站 点 的 根 文件 夹 。 如 图 9-3 所 示 ， 在 新 建站 点 向 导 的 第 3 步 对 话 框 中 ， 
设置 本 地 站 点 的 根 文 件 夹 ， 然 后 单 击 “ 下 一 步 ” 按 钮 。 


courseWebsite 的 站 点 定义 为 


在 开发 过 程 中 ,您 打算 如 何 使 用 您 的 文件 ? 


加 编辑 我 的 计算 机 上 的 本 地 副本 ， 完 成 后 再 上 传 到 服务 器 ( 推荐 ) 双 ) 
〇 使 用 本 地 网 络 直接 在 服务 器 上 进行 编辑 中) 





E: \Web Page\ex, 











[上 一 步 四 ] = 步 吕 [| 职 滑 





图 9-3 设置 本 地 站 点 的 根 文件 夹 
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(4) 设置 远程 服务 器 连接 方式 。 如 图 9-4 所 示 ， 在 新 建站 点 向 导 的 第 4 步 对 话 框 中 ， 
在 “您 如 何 连接 到 远程 服务 器 ”下 拉 列 表 框 中 选择 “无 ”选项 ， 然 后 单 击 “ 下 一 步 ” 
按钮 。 


courseWebsite 的 站 点 定义 为 

















《上 一 步 四 ] 故 二 步 如 让 [取消 帮助 
图 9-4 选择 是 否 使 用 远程 服务 器 


(5) 确认 站 点 的 相关 设置 。 如 图 9-5 所 示 ， 在 新 建站 点 向 导 第 5 步 的 对 话 框 中 ， 核 对 
和 确认 站 点 的 相关 设置 后 ， 单 击 “ 完 成 ”按钮 ， 即 可 创建 本 地 站 点 。 


courseWebsite 的 站 点 定义 为 





本 地 信息 : 《 将 创建 本 地 根 文件 夹 ) 
站 点 名 称 : coursefebsite 
本 地 根 文件 夹 ; E: Web Pags\exereise\ehD9\ 


程 信息 : 
访问 :我 将 在 以 后 完成 此 设置 。 


访问 :我 将 在 以 后 完成 此 设置 。 
可 以 使 用 高 顷 ' 选项 卡 对 您 的 站 点 进行 进一步 配置 。 








图 9-5 确认 站 点 的 相关 设置 


63 创建 公共 文件 夹 


在 多 数 情况 下 ， 一 个 网 站 是 由 格式 多 样 的 相关 文件 组 成 的 。 网 站 中 的 众多 文件 包括 
网 页 形式 的 HTML 文件 、 可 供 下 载 的 Word 和 PowerPoint 文件 、 存 储 图 像 的 .gif 文件 、 修 
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饰 和 布局 网 页 的 CSS 文档 、 动 画 和 背景 音乐 等 多 媒体 文件 以 及 含有 JavaScript 代码 的 程序 
文件 。 这 些 文件 通过 HTML 中 的 a、img、link、object、bgsound 和 script 元 素 有 机 地 组 织 
在 一 起 。 

除 文件 格式 的 多 样 性 外 ， 文 件数 量 众多 也 是 网 站 的 另 一 个 特性 。 为 了 有 效 地 组 织 
管理 网 站 中 数量 众多 的 各 类 文件 ， 需 要 首先 在 站 点 根 文件 夹 下 创建 若干 公共 文件 夹 ， 然 后 
将 每 个 文件 保存 在 相应 的 公共 文件 夹 中 。 例 如 ， 在 html 文件 夹 中 存放 网 页 形式 的 HTML 
文件 ， 在 files 文件 夹 中 存放 可 供 下 载 的 Word 和 PowerPoint 文件 ， 在 images 文件 夹 中 存 
放 .gif 图 像 文 件 ， 在 css 文件 夹 中 存放 CSS 文档 ， 在 media 文件 夹 中 存放 多 媒体 文件 ， 在 
js 文件 夹 中 存放 JavaScript 脚本 文档 ， 在 textmaterials 文件 夹 中 存放 制作 网 页 所 需 的 文字 
素材 。 

使 用 Dreamweaver， 不 仅 可 以 轻松 创建 本 地 站 点 的 公共 文件 来， 而且 能 够 轻松 修改 和 
维护 网 站 中 的 各 种 文件 。 

【 例 9-2】 在 【 例 9-1】 的 基础 上 ， 使 用 Dreamweaver 的 文件 面板 ， 创 建 本 地 站 点 的 公 
共 文 件 夹 。 具 体 步 又 如 下 : 

(1) 打开 文件 面板 。 如 果 在 Dreamweaver 窗口 中 没有 显示 文件 面板 ， 可 以 在 菜单 栏 中 
选择 “窗口 ”| “文件 ”命令 。 

(2) 创建 公共 文件 夹 。 如 图 9-6 所 示 ， 在 文件 面板 中 右 击 “站 点 -courseWebsite”， 再 
在 弹出 的 快捷 菜单 中 选择 “新 建文 件 夹 ”命令 ， 即 可 创建 没有 标题 的 文件 夹 ， 然 后 将 该 文 
件 夹 命名 为 css。 按 照 类 似 的 操作 方法 ， 依 次 建立 fles、html、images、js、media 和 
textmaterials 文件 夹 。 














加 





名 -omsefebsite 加 了 Cl 人 ww 鱼 | 转 


Ministrator\ 桌 面 

















新 建文 件 @) 

打开 @) 
打开 方式 中 
让 编辑 外 
nedia 选择 G) 
textmaterials 


Ti 








9-6 创建 公共 文件 夹 


6@4 设计 网 页 的 版 面 布局 











通常 情况 下 ， 网 站 中 的 一 组 网 页 具有 相同 的 版 面 布 局 。 在 设计 网 页 的 版 面 布局 时 ， 
主要 考虑 将 整个 网 页 划分 为 几 个 矩形 区 域 ， 并 确定 每 个 矩形 区 域 的 尺寸 、 形 式 和 作用 。 如 
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图 9-7 所 示 ， 在 课程 网 站 中 ， 每 个 网 页 从 上 到 下 依次 分 为 文字 横幅 、 动 画 横幅 、 水 平 导航 
条 、 主 要 内 容 和 底部 五 个 矩形 区 域 ， 每 个 矩形 区 域 的 宽度 均 为 800px。 








文字 横幅 (charBanner) @ 尺 寸 : 800px〈 宽 ) X30px (高 ) @ 文 字 内 容 : Web 标准 网 页 设计 原理 与 制 
作 技 术 


动画 横幅 (cartoonBanner)Q@ 尺 寸 : 800px( 宽 ) X80px( 高 ) @GIF 动画 , XHTML、 div+CSS 和 JavaScript 
三 个 画面 交 蔡 切换 。 或 者 ，SWF 动画 ， 缩 放 自如 的 文字 (文字 内 容 ， XHTML+div+CSS+JavaScript); 
文字 先 由 小 变 大 ， 再 由 大 变 小 


水 平 导 航 条 (naviBar) OO 尺寸 ; 800px ( 宽 ) Xx2em (高 ) @ 使 用 ul、1i 和 a 元 素 制作 水 平 导 航 条 
@ 在 水 平 导 航 条 中 有 指向 对 应 静态 网 页 的 四 个 超 链接 


主要 内 容 (mainContent) 尺寸 :宽度 800px， 高 度 随 内 容 多 少 自动 调整 


底部 (footer) @ 尺 寸 : 800px ( 宽 ) X20px (高 ) @ 文 字 内 容 : Copyright @ 2010-2017 《网 页 设计 
与 制作 》 课 程 建设 小 组 





图 9-7 课程 网 站 的 网 页 版 面 布 局 


注意 ; 在 动画 横幅 中 放置 的 动画 ， 可 以 是 使 用 Fireworks 软件 制作 的 GIF 动画 ， 也 可 
以 是 使 用 Flash 软件 制作 的 SWF 动画 。 但 这 两 种 动画 的 尺寸 均 是 宽 800px、 高 80px。 


按照 如 图 9-7 中 的 网 页 版 面 布局 ，XHTML 文档 主体 中 的 关键 代码 如 下 : 


<div id="container"> 








<div id="charBanner"></div> <!-- 文 字 横 幅 --> 
<div id="cartoonBanner"></div> <!-- 动 画 横幅 --> 
<div id="naviBar"></div> <!-- 水 平 导航 条 --> 
<div idq="mainContent"></div> <!-- 主 要 内 容 --> 
<div id="footer"></div> <!-- 底 部 --> 
</div> 
注意 : 


中 在 上 述 代码 中 ， 每 个 div 元 素 及 其 盒子 对 应 一 个 矩形 区 域 。 

@ 通常 情况 下 ，XHTML 文档 主体 中 有 一 个 最 大 、 最 外 层 的 div 盒子 ， 其 他 div 盒子 
都 包含 在 该 div 盒子 中 。 例 如 ， 在 上 述 代 码 中 ，container 即 是 最 大 、 最 外 层 的 div 盒子 ， 
charBanner、cartoonBanner、naviBar、mainContent 和 footer 五 个 div 念 子 都 包含 在 container 
金子 内 。 


外 .5 素材 准备 


针对 课程 网 站 的 四 项 功能 ， 并 依据 网 页 的 版 面 布局 ， 需 要 准备 以 下 相关 素材 。 
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(1) 介绍 性 文字 。 网 站 中 的 介绍 性 文字 既 要 突出 关键 词 ， 又 要 注重 简洁 。 关 键 词 能 
突出 重点 ， 吸 引 网 页 浏览 者 的 眼球 。 文 字 简洁 能 够 节省 网 页 浏览 者 的 阅读 时 间 。 因 此 ， 有 
必要 对 介绍 性 文字 进行 反复 推敲 。 

在 课程 网 站 的 “课程 介绍 ”网 页 中 ， 为 了 描述 Web 标准 网 页 的 基本 设计 原理 和 关键 
制作 技术 ， 可 以 使 用 如 下 介绍 性 文字 : 

本 课程 以 HTML 4.01、XHTML 1.0 和 CSS 2.1 技术 规范 为 基础 ,重点 讲解 基于 XHTML、 
div 和 CSS 的 Web 标准 网 页 设计 原理 和 制作 技术 。 

与 HTML 相 比 ，XHTML 的 语法 更 加 规范 和 严谨 。CSS 为 网 页 的 样式 设计 提供 了 灵活 
的 手段 ， 能 够 “通过 样式 实现 网 页 的 表现 ” 并 使 网 页 “表现 ”出 丰富 的 视觉 效果 。 使 用 
XHTML 和 CSS， 能 够 实现 “内 容 和 结构 与 表现 的 分 离 ”。 在 Web 标准 网 页 设计 与 制作 中 ， 
“内 容 和 结构 ”保存 在 XHTML 文档 中 ,“ 表 现 ” 的 定义 则 保存 在 CSS 文档 中 。 在 XHTML 
文档 头 部 ， 使 用 link 元 素 可 以 链接 CSS 文档 中 的 外 部 样式 表 。 在 XHTML 文档 主体 ， 如 果 
元 素 与 外 部 样式 表 中 的 选择 器 及 其 CSS 规则 匹配 ， 元 素 中 的 内 容 将 按照 CSS 规则 中 的 特 
性 声明 “表现 ”在 网 页 中 。 利 用 div+CSS， 不 仅 能 够 对 网 页 进行 灵活 的 布局 ， 而 且 能 够 统 
一 网 站 内 网 页 的 设计 风格 ， 同 时 大 大 提高 样式 代码 的 可 重用 性 ， 并 降低 创建 、 调 整 和 修改 
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网 页 的 成 本 。 

本 课程 能 够 帮助 学 习 者 了 解 Web 标准 网 页 设计 的 基本 原理 , 掌握 XHTML、 div 和 CSS 
等 最 新 的 网 页 制作 技术 ， 为 今后 的 动态 网 页 设计 与 制作 以 及 网 站 开发 与 管理 打下 坚实 的 
基础 。 


【 例 9-3】( 由 学 生 自己 完成 ) 使 用 记事 本 编辑 上 述 介绍 性 文字 ， 再 将 这 些 文字 保存 在 
文件 名 为 9-1.txt 的 文本 文件 中 ， 最 后 将 该 文件 保存 在 本 地 站 点 的 公共 文件 夹 textmaterials 
中 ， 以 备 制 作 网 页 时 使 用 。 

(2) PPT 文件 。 对 于 “课件 下 载 ” 网 页 ， 需 要 制作 课件 ， 并 创建 PowerPoint 文件 。 

【 例 9-4】 (由 学 生 自 己 完成 ) 针对 课程 各 章 ， 使 用 PowerPoint 软件 制作 课件 ， 创 建 各 
章 对 应 的 PowerPoint 文 件 ， 文 件 名 分 别 为 ch01.ppt 一 ch08.ppt， 然 后 将 这 八 个 文件 保存 在 本 
地 站 点 的 公共 文件 夹 fles 中 。 

(3) 图 片 和 动画 文件 。 在 网 页 的 版 面 布局 设计 完成 之 后 ， 才 能 确定 图 片 或 动画 所 占 矩 
形 区 域 的 尺寸 。 因 此 ， 通 常 先进 行 网 页 的 版 面 布局 设计 ， 然 后 再 使 用 Fireworks 或 Flash 软 
件 制作 或 修改 图 片 或 动画 文件 。 

根据 网 页 的 版 面 布局 设计 ， 在 动画 横幅 (cartoonBanner) 中 既 可 以 放置 画面 切换 的 GIF 
动画 ， 也 可 以 放置 文字 缩放 自如 的 SWF 动画 。 

【 例 9-S】 (由 学 生 自 己 完成 ) 使 用 Fireworks 软件 制作 GIF 动画 ， 使 用 Flash 软件 制作 
SWF 动画 ， 具 体 要 求 如 下 : 

(1) GIF 动画 和 SWF 动画 的 场景 大 小 : 800px( 宽 ) x80px (高 ) 。 

(2) GIF 动画 为 XHTML、div+CSS 和 JavaScript 三 个 画面 交替 切换 。 

(3) SWF 动画 为 缩放 自如 的 文字 ， 文 字 内 容 为 “XHTML+ div+CSS+JavaScript”， 文 
字 先 由 小 变 大 ， 再 由 大 变 小 。 

(4) GIF 动画 的 文件 名 为 cartoonBanner.gif，SWF 动画 的 文件 名 为 cartoonBannerswf。 
然后 ， 将 这 两 个 文件 分 别 保存 在 本 地 站 点 的 公共 文件 夹 images 和 media 中 。 
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外 部 样式 表 中 的 ID 选择 器 与 XHTML 文档 中 的 div 元 素 有 着 密切 的 关系 。 首 先 ， 在 
CSS 文档 的 外 部 样式 表 中 ， 定 义 ID 选择 器 及 其 对 应 的 CSS 规则 。 然 后 ， 在 XHTML 文档 
中 通过 div 元 素 及 其 id 属性 值 应 用 外 部 样式 表 中 的 ID 选择 器 及 其 对 应 的 CSS 规则 ， 能 够 
实现 网 页 的 版 面 布局 。 

在 9.4 节 的 网 页 版 面 布局 中 ， 共 有 container、charBanner、cartoonBanner、naviBar、 
mainContent 和 footer 六 个 div 盒子 构成 的 矩形 区 域 。 其 中 ，container 盒子 是 最 大 、 最 外 层 
的 div 盒子 ，charBanner、cartoonBanner、naviBar、mainContent 和 footer 五 个 div 盒子 都 
包含 在 container 盒子 内 。 针 对 这 六 个 div 盒子 ， 在 外 部 样式 表 中 需要 定义 六 个 相应 的 ID 
选择 器 及 其 对 应 的 CSS 规则 。 

【 例 9-6】 使 用 Dreamweaver 创建 CSS 文档 ， 并 在 其 中 创建 外 部 样式 表 。 然 后 ， 将 该 
CSS 文档 保存 在 本 地 站 点 的 公共 文件 夹 css 中 ， 并 将 该 CSS 文档 命名 为 default.css。CSS 
规则 及 其 代码 如 下 : 


#container { width:800px; margin:0 auto; } 








#charBanner { width:800px; height:30px; background-color:#CCC; } 

#cartoonBanner { width:800px; height:80px; } 

#naviBar { width:800px; height:2em; padding:0; background-color:#FAl; } 
#naviBar ul { width:800px; padding:0.5em 0; margin:0 auto; list-style:none; } 
#naviBar 1i { float:left; width:200px; text-align:center; } 
#naviBar a { text-decoration:none; color:red; } 

#naviBar a:hover { color:purple; } 
#mainContent { width:780px; padding:10px; background-color:#CFF; } 
#footer { width:800px; height:20px; background-color:#FF9; } 


注意 ;在 上 述 外 部 样式 表 中 ，ID 选择 器 #naviBar 与 #naviBar ul、#naviBar li、#naviBar 
a 和 #naviBar a:hover 四 个 后 代 选 择 器 共同 定义 了 水 平 导 航 条 。 
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在 一 个 网 站 中 ， 通 常 有 几 十 甚至 上 百 个 网 页 ， 其 中 许多 网 页 不 仅 有 相同 的 版 面 布 
局 ， 而 且 在 公共 矩形 区 域 中 的 内 容 也 是 一 样 的 。 为 此 ， 可 以 首先 使 用 Dreamweaver 将 相同 
的 网 页 版 面 布局 和 网 页 中 的 公共 矩形 区 域 固化 在 HTML 模板 中 。 然 后 ， 在 HTML 模板 的 
基础 上 制作 每 个 网 页 。 这 样 ， 每 个 网 页 的 相同 版 面 布局 和 公共 和 矩形 区 域 中 的 内 容 将 自动 生 
成 ， 只 要 在 每 个 网 页 中 添加 各 自 的 内 容 即 可 完成 网 页 的 制作 。 显 然 ， 利 用 HIML 模板 制 
作 网 页 将 大 大 提高 网 站 建设 和 维护 的 效率 。 

【 例 9-7】 使 用 Dreamweaver 创建 课程 网 站 的 HIML 模板 。 具 体 步骤 如 下 : 














第 9 章 使 用 Dreamweaver 建设 网 站 


(1) 新 建 HIML 模板 。 进 入 Dreamweaver 后 ， 确 认 当 前 本 地 站 点 是 courseWebsite， 
在 菜单 栏 中 选择 “文件 ” |“ 新建 ”命令 ， 会 弹出 “新 建文 档 ” 对 话 框 。 如 图 9-8 所 示 ， 在 
“新 建文 档 ” 对 话 框 的 “类 别 ” 列 表 框 中 选择 “基本 页 ”， 在 “基本 页 ”列表 框 中 选择 
“HTML 模 板 ”, 在 “文档 类 型 ”下 拉 列 表 框 中 选择 XHTML 1.0 Strict。 然 后 单 击 “ 创 建 ” 
按钮 ， 即 可 新 建 HTML 模板 ， 同 时 打开 文档 窗口 。 











页 面 设计 5 有 辅助 功能 的 ? 
































[Es ] 





图 9-8 ”在 “新 建文 档 ” 对 话 框 中 新 建 HTML 模板 


(2) 链接 外 部 样式 表 。 如 图 9-9 所 示 ， 在 CSS 面板 的 右 下 角 单 击 “ 附 加 样式 表 ” 按 
钮 ， 会 弹出 “链接 外 部 样式 表 ” 对 话 框 。 在 “链接 外 部 样式 表 ” 对 话 框 中 ， 单 击 “ 浏 览 ” 
按钮 。 在 弹出 的 “选择 样式 表 文件 ”对 话 框 中 双击 公共 文件 夹 css 中 的 CSS 文档 
default.css， 即 可 返回 “链接 外 部 样式 表 ” 对 话 框 。 在 “链接 外 部 样式 表 ” 对 话 框 中 ， 单 
击 “ 确 定 ” 按 钮 ， 即 可 在 HTML 模板 中 链接 CSS 文档 default.css 中 的 外 部 样式 表 。 





@@ 指 定 外 部 样式 表 
所 在 的 CSS 文档 








|519 x li5v 1KA1L 秒 





9-9 ”链接 外 部 样式 表 
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此 时 ， 在 HIML 模板 的 头 部 将 自动 生成 类 似 如 下 的 link 元 素 及 其 代码 : 


<link href="file:///E|/Web Page/exercise/ch09/css/default.css" rel="stylesheet" 
type="text/css" /> 


注意 : 

@ 从 本 质 上 讲 ，HTML 模板 也 是 一 种 HIML 文档。 因此 ， 在 HTML 模板 的 头 部 也 可 
以 通过 link 元 素 链接 CSS 文 档 中 的 外 部 样式 表 。 但 与 一 般 HTML 文 档 不 同 的 是 ， 在 HTML 
模板 的 基础 上 ， 还 可 以 制作 其 他 的 HTML 文档 。 

@ 此 时 ，link 元 素 的 href 属性 值 使 用 绝对 路 径 指向 CSS 文档 default.css。 


(3) 插入 div 元 素 ， 布 局 网 页 版 面 。 在 文档 窗口 的 “代码 ”视图 中 ， 将 光标 定位 于 
body 元 素 的 开始 标签 与 结束 标签 之 间 。 在 菜单 栏 中 选择 “插入 ”|“ 布 局 对 象 ”|“Div 标 
签 ” 命 令 ， 会 弹出 “插入 Div 标签 ”对 话 框 。 如 图 9-10 所 示 ， 在 “插入 Div 标签 ”对 话 杠 
的 ID 下 拉 列 表 框 中 选择 ID 选择 器 container， 然 后 单 击 “确定 ”按钮 ， 即 可 在 body 元 素 
内 插入 id 属性 值 为 container 的 div 元 素 。 











cartoonBanner 
charBanner 


footer 
ImainContent 
naviBar 











图 9-10 插入 div 元 素 


按照 类 似 的 操作 方法 ， 在 id 属性 值 为 container 的 div 元 素 内 ， 依 次 插入 id 属性 值 为 
charBanner、cartoonBanner、naviBar、mainContent 和 footer 五 个 div 元 素 。 此 时 ， 在 
HIML 模板 的 主体 中 ， 将 自动 生成 如 下 代码 : 

<div id="container"> 此 处 显示 id "container" 的 内 容 

<div id="charBanner"> 此 处 显示 id "charBanner" 的 内 容 </div> 

<div id="cartoonBanner"> 此 处 显示 id "cartoonBanner" 的 内 容 </div> 
<div id="naviBar"> 此 处 显示 id "naviBar" 的 内 容 </div> 

<div id="mainContent"> 此 处 显示 id "maincontent" 的 内 容 </div> 
<div id="footer"> 此 处 显示 id "footer" 的 内 容 </div> 

</div> 


注意 : 上 述 代码 及 其 顺序 必须 与 网 页 版 面 布局 中 六 个 div 盒子 之 间 的 关系 相对 
应 一 一 container 盒子 是 最 大 、 最 外 层 的 盒子 。 在 container 盒子 内 ， 从 上 到 下 依次 包含 
charBanner、cartoonBanner、naviBar、mainContent 和 footer 五 个 div 盒子 。 

(4) 利用 【 例 9-5】 中 制作 的 GIF 动画 和 SWF 动画 文件 ， 在 该 HTML 模板 中 可 以 采 
用 以 下 两 种 方法 之 一 制作 动画 横幅 。 
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@ 利用 GIF 动画 文件 、 使 用 img 元 素 制作 动画 横幅 。 在 文档 窗口 的 “代码 ”视图 
中 ， 选 中 id 属性 值 为 cartoonBanner 的 div 元 素 中 的 文本 内 容 “ 此 处 显示 这 
"cartoonBanner" 的 内 容 ”。 在 菜单 栏 中 选择 “插入 ”|“ 图 像 ”命令 ， 会 弹出 “选择 图 像 
源 文 件 ” 对 话 框 。 如 图 9-11 所 示 ， 在 “选择 图 像 源 文件 ”对 话 框 中 选择 公共 文件 夹 
images 中 的 GIF 动画 文件 cartoonBanner gif， 然 后 单 击 “ 确 定 ” 按 钮 ， 会 弹出 “图 像 标签 
辅助 功能 属性 ”对 话 框 。 

















选择 图 依 源 文件 
选取 文件 名 自 四 文件 系统 
〇 数据 源 








MelvecsSeaaseripe 








cartoonBanner. if | 800 x 80 GIF, 209 K 7 


六 件 类 型 [)， [图像 文件 (tgif;* jpe:*. jpee;*.pns) 国 | 
VRL: [File:///E |/Web Pageyexercise/chDgyimagesi] 
相对 于 : 文档 Untitled-1 


在 站 点 定义 中 i 
要 使 用 此 选项 ， 请 保存 文件 。 























9-11 利用 GIF 文件 、 使 用 img 元 素 制作 动画 横幅 


如 图 9-12 所 示 ， 在 “图 像 标签 辅助 功能 属性 ”对 话 框 的 “替换 文本 ”文本 框 中 输入 
“GIF 动画 横幅 ”， 然 后 单 击 “ 确 定 ” 按 钮 。 


[ED 





著 换 文本 ， | 加 有 Bje 介 
详细 说 明 : http:// 




















如 果 在 插入 图 像 时 不 想 输入 此 信息 ， 请 更 收 “ 畏 助 功 
说 ”首选 参数 ， 





图 9-12 设置 图 像 的 替换 文本 








此 时 ， 在 这 属 性 值 为 cartoonBanner 的 div 元素 内 将 自动 插入 如 下 img 元 素 及 其 代码 : 


<img src="file:///E|/Web Page/exercise/ch09/images/cartoonBanner .gif" width= 
"800" height="80" alt="GIF 动画 横幅 " /> 


注意 ; 此 时 ，img 元 素 的 src 属性 值 使 用 绝对 路 径 指向 GIF 动画 文件 cartoonBanner gif。 
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中 ， 














@ 利用 SWF 动画 文件 、 使 用 object 元 素 制作 动画 横幅 。 在 文档 窗口 的 “代码 ”视图 
删除 id 属性 值 为 cartoonBanner 的 div 元 素 中 的 文本 内 容 “ 此 处 显示 id "cartoonBanner" 








的 内 容 ”， 并 确认 光标 定位 于 该 div 元 素 内 。 在 菜单 栏 中 选择 “插入 ”|“ 媒 体 ”| Flash 命 


令 ; 


会 弹出 “选择 文件 ”对 话 框 。 如 图 9-13 所 示 ， 在 “选择 文件 ”对 话 框 中 选择 公共 文 


件 夹 media 中 的 SWF 动画 文件 cartoonBanner.swf， 然 后 单 击 “ 确 定 ” 按 钮 ， 会 弹出 “对 象 
标签 辅助 功能 属性 ”对 话 框 。 





选取 文件 名 自 名 文 件 系统 站 点 和 服务 器 
〇 数据 源 








查找 范围 人 :| 局 nedia 四 序 己 四 


A Ee Te 


























cartoonBanner. swf 


: | 所 有 文件 (x.*) 加 























File: ///E /Web Pageyexercise/ch0gymediay， 
文档 司 utitlet-l 

















在 站 点 定义 中 
要 使 用 此 选项 ， 请 保存 文件 。 





图 9-13 利用 SWF 文件 、 使 用 object 元 素 制作 动画 横幅 
在 “对 象 标签 辅助 功能 属性 ”对 话 框 中 单 击 “ 确 定 ” 按 钮 ， 可 以 在 id 属性 值 为 


cartoonBanner 的 div 元 素 内 自动 插入 如 下 object 元 素 及 其 代码 : 


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= 
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve 
rsion=7,0,19,0" width="800" height="80"> 
<param name="movie" value="file:///E|/Web Page/exercise/ch09/media/cartoon 
Banner.swf" /> 
<param name="quality" value="high" /> 
<embed src="file:///E|/Web Page/exercise/ch09/media/cartoonBanner.swf" 
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash" width="800" height="80"></embed> 
</object> 


注意 ; 在 第 1 个 param 元 素 的 value 属性 值 以 及 embed 元 素 的 src 属性 值 中 均 使 用 绝 


对 路 径 指 向 SWF 动画 文件 cartoonBannerswf-. 


(5) 制作 初步 的 水 平 导 航 条 。 如 图 9-14 所 示 ， 在 文档 窗口 的 “代码 ”视图 中 ， 删 除 


id 属性 值 为 naviBar 的 div 元 素 中 的 文本 内 容 ， 并 确认 光标 定位 于 该 div 元 素 内 。 在 菜单 栏 
中 选择 “插入 ”|“ 标 签 ”命令 ， 会 弹出 “标签 选择 器 ”对 话 框 。 在 “标签 选择 器 ”对 话 
框 的 左边 列表 中 依次 展开 “标记 语言 标签 ”|“HTML 标签 ”|“ 列 表 ”， 再 在 右边 列表 中 


双 





击 UU， 会 弹出 “标签 编辑 器 ”对 话 框 。 
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Cdir>Y dir> 
mr 


Untitled-l# 


泊 | 估 长 鸭 旬 | 立 电 国 | 








加 | 

《DL> NN all IE all HI 

XIL>. .CVDL> HTIL End Tag: Req 
<div id="footer "> 此 处 显 昼 | The ul elenent is a container for an unordered list of items 
/div> “unordered list” neans that the itens are rendered with a le 
</body> symbol (depending on the type attribute setting or list-styl 


style sheet attribute setting) that implies no specific orde 
Yhtal> jtene ather then hw mivtwe of ocetion within :he 1irt Fnnt i 


mm | 国 


| 





图 9-14 插入 ul 标签 (a) 


如 图 9-15 所 示 ， 在 “标签 编辑 器 ”对 话 框 中 单 击 “确定 ”按钮 ， 即 可 在 id 属性 值 为 
naviBar 的 div 元 素 内 插入 ul 元 素 ， 同 时 关闭 “标签 编辑 器 ”对 话 框 。 


标签 编辑 器 一 ul 


常规 
样式 表 /辅助 功能 
日 事件 
onClick 
onDblClick 
onllouseDown 























onMouselp 


onMouseDver 








图 9-15 插入 ul 标签 (b) 


按照 类 似 的 操作 方法 ， 在 也 元 素 内 插入 前 后 排列 的 四 个 二 元 素 ， 并 依次 在 每 个 元 素 
的 开始 标签 和 结束 标签 之 间 输 入 文本 “课程 介绍 ”“ 课 件 下 载 ”“ 学 习 指 南 ” 和 
“JavaScript 演示 ”。 然 后 ， 按 照 如 下 格式 ， 在 id 属性 值 为 naviBar 的 div 元 素 内 编辑 和 排 
版 HIML 代码 : 


<div id="naviBar"> 
<ul> 
<1i> 课 程 介绍 </1i> 
<1i> 课 件 下 载 </1i> 
<1i> 学 习 指 南 </1i> 
<1i>JavaSscript 演示 </1i> 
</ul> 
</div> 
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(6) 在 HIML 模板 中 设置 可 编辑 区 域 。 首 先 ， 切 换 到 文档 窗口 的 “设计 ”视图 。 在 
“设计 ”视图 中 删除 mainContent 盒子 内 的 文本 ， 并 确认 光标 定位 在 其 中 。 然 后 ， 在 菜单 
栏 中 选择 “插入 ”|“ 模 板 对 象 ” |“ 可 编辑 区 域 ” 命 令 ， 会 弹出 “新 建 可 编辑 区 域 ” 对 话 
框 。 在 “新 建 可 编辑 区 域 ”对 话 框 中 将 可 编辑 区 域 的 名 称 设 定 为 EditRegion， 并 单 击 “ 确 
定 ” 按 钮 ， 即 可 在 mainContent 盒子 内 设置 可 编辑 区 域 。 如 图 9-16 所 示 ， 除 mainContent 
盒子 内 的 可 编辑 区 域外 ，HTML 模板 的 标题 也 属于 可 编辑 区 域 。 





Untitled-1 (XHTHL)s] 
命令 全 ) 站 点 G) 窗口 四 帮助 0 














撞 | 下 
Goar> Cdivicontainer> CdivinainContent> [ontenplate editable) 








图 9-16 在 HTML 模板 中 设置 可 编辑 区 域 


(7) 保存 HTML 模板 。 在 菜单 栏 中 选择 “文件 ”|“ 保 在 ”命令 ， 会 弹出 “另存 为 模 
板 ” 对 话 框 。 如 图 9-17 所 示 ， 在 “另存 为 ”文本 框 中 ， 将 HTML 模板 的 文件 名 设 定 为 
MyTemplate。 然 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 保存 HTML 模板 。 








| 另存 为 模板 区 


局 coursefebsite 国 | | 本 地 视图 
WAC 加 如 C5 人 HY 名 | 加 


现存 的 模板 : | (没有 模板 ) 日 加 站 点 - courseWebsite GE:\Web 了 
名 -ss 
名 files 
一 加 htnl 
加 inages 
名 js 












































9-17 ”保存 HTML 模板 
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注意 : 

@ 在 本 地 站 点 courseWebsite 中 保存 第 1 个 HTML 模板 时 ，Dreamweaver 会 在 站 点 根 
文件 夹 中 自动 创建 公共 文件 夹 Templates， 并 将 第 1 个 HTML 模板 保存 在 公共 文件 夹 
Templates 中 。HTML 模板 文件 的 扩展 名 为 .dwt。 

@ 如 图 9-18 所 示 ， 保 存 HIML 模板 后 ， 其 中 指向 CSS 文档 、GIF 动画 文件 或 SWF 
动画 文件 的 路 径 将 由 绝对 路 径 自 动 变 为 相对 路 径 。 

@ 在 HIML 模板 中 ， 在 注释 <!-- TemplateBeginEditable name=" " --> 和 <l!-- 
TemplateEndEditable --> 之 间 定 义 了 可 编辑 区 域 。 

《IDOCTYPE htnl PUBLIC“-A/W3C//DTD YHIIL 1.0 Strict/VER “http://ww.w3, org/TR/xhtnl1/DTD/xhtnll-strict, dtd"> 
4htnl xnlns="http://wmm. w3. org/1999/zhtnl 


head> 
Kneta http-equil 进 ext/htnl; charset=gb2312” /> 







/head> 
《body> 
《div id "container" > 此 处 显示 id “container” 的 内 容 
《div id="charBanner"》 此 处 显示 id“charBanner” 的 内 容 </div> 
《div id="cartoonBanner "此 处 显示 id“cartoorBarmer” 的 内 容 
《object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase= 
“http://dowmload, macromedia, co 





rmer, svf"! quality="high” pluginspage="http://www, nacronedia, con/ go/ getflashplayer” type= 
"applicationf sheckywayer 们 ash widthe B00 height=" 80">C/enbed> 
Wbjet 和 ss 1 
/div> 
《div id-"naviBar"》 
《ly 
《1i) 课 程 介绍 4/1i> 
《li> 课 件 下 载 了 /1i》 
《li 学 习 指南 人 /1i》 
《li?JavaScript 演 示 《/1i> 
ul) 
Ydiv) 
Cdiv id-"nairnCont ei 
《div id="footer") 此 处 显 东 
</div> 
/body> 
/htnl> 





Tonplatelenind dtable nane EditRepion VEditRerioncl TenplateEna 
id “footer” 的 内 容 C/div》 








图 9-18 HTML 模板 及 其 格式 


68 运用 模板 制作 网 页 


使 用 Dreamweaver， 在 HIML 模板 基础 上 可 以 快速 地 制作 网 页 。 

【 例 9-8]】 使 用 Dreamweaver， 在 HTML 模板 基础 上 制作 “课程 介绍 ”网 页 。 有 具体 步骤 
如 下 : 

(1) 新 建 XHTML 文档 。 进 入 Dreamweaver 后 ， 在 菜单 栏 中 选择 “文件 ”|“ 新 建 ” 








了 280 Web 标准 网 页 设计 原理 与 前 并 开发 技术 





命令 ， 会 弹出 “从 模板 新 建 ” 对 话 框 。 如 图 9-19 所 示 ， 在 该 对 话 框 中 选择 “模板 ”选项 
卡 ， 在 左边 的 “模板 用 于 ”列表 框 中 选择 “站 点 ‘courseWebsite*”， 在 中 间 列 表 中 选择 模板 
MyTemplate， 并 确认 选中 右 下 角 的 “ 当 模 板 改 变 时 更 新 页 面 ” 复 选 框 。 然 后 ， 单 击 “ 创 
建 ” 按 钮 ， 即 可 在 模板 MyTemplate 基础 上 新 建 XHTML 文档 。 此 时 ，Dreamweaver 会 自 
动 打 开 文档 窗口 ， 并 切换 到 文档 窗口 的 “设计 ”视图 。 








站 点 "courseWebsite” 
站 点 "DataBase” 











当 模 板 改 变 时 更 新 页 面 QD) 


到 了 更生 内 安 Cy 已 殉 站 








图 9-19 新 建 XHTML 文档 


如 图 9-20 所 示 ，id 属性 值 为 container、charBanner、cartoonBanner、naviBar、 
mainContent 和 footer 的 六 个 div 元 素 盒子 会 按照 HTML 模板 中 的 版 面 布局 自动 添加 到 新 建 
网 页 中 。 其 中 ，HTML 文档 头 部 的 标题 以 及 id 属性 值 为 mainContent 的 div 元 素 盒子 内 部 
属于 可 编辑 区 域 。 





EEC 
Da CC 目 双 











图 9-20 ”网 页 中 的 可 编辑 区 域 
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(2) 在 可 编辑 区 域 中 添加 每 个 网 页 的 专 有 内 容 。 首 先 ， 在 文档 工具 栏 的 “标题 ”文本 
框 中 输入 文本 “课程 介绍 ”并 按 回 车 键 ， 即 可 设置 网 页 标题 。 然 后 ， 在 mainContent 盒子 
的 可 编辑 区 域 中 删除 多 余 文 本 EditRegion， 并 将 在 【 例 9-3】 中 准备 好 的 文字 从 文本 文件 9-1.txt 
中 复制 到 该 可 编辑 区 域 。 

(3) 设置 段落 。 首 先 ， 切 换 到 文档 窗口 的 “代码 ”视图 。 然 后 ， 按 照 图 9-21， 在 
mainContent 盒子 的 可 编辑 区 域 中 删除 多 余 的 br 元 素 及 其 标签 ， 并 正确 添加 和 使 用 三 个 p 
元 素 。 这 样 ， 可 以 将 可 编辑 区 域 中 的 整个 文本 结构 化 为 三 个 段落 。 








Ol Nacronedia Dreaaweaver 8 — [Untitled-2 (XHT 了 L)*] 
插入 CI) 修改 人 @) 文本 CI) 命令 CC) 站 点 G) 窗口 人 帮助 吕 
i 2 MO. | C EE. 








1i> 课 程 介绍 </1i 
1i) 课 件 下 载 </1i 


让 
条 
2 
口 
草 
名 


总 
号 


p bs ! InstancebeginEditable name= EditRe 
0 站 课程 Da 4.01、XHTIL 1. 0 和 CSS 
风范 为 基础 ， 重 点 讲解 基于 XHTICL、 Se 
呈 租 比 ， XHTILL 的 语法 更 加 规范 和 严谨 。CSS 为 网 页 的 样式 设计 提供 了 灵活 的 手段 ， 能 够 “通过 样 
， 并 使 网 页 “表现 ”出 丰富 的 视觉 效果 。 使 用 XHTML 和 CSS， 能 够 实现 “内 容 和 结 
，“ 内 容 和 结构 ”保存 在 XHTIL 文 档 中 ，“ 表 现 ” 的” 轩 
也 文档 的 头 部 ， 使 用 1ink 元 素 可 以 链接 C55 文 档 中 的 外 部 样式 表 。 在 XH 出 
， 如 果 元 素 与 外 部 样式 表 中 的 选 树 器 及 其 规则 匹配 ， 天 党 中 的 四 站 届 俱 各 袜 则 由 的 汪 
ald “表现 ”在 网 页 中 。 利 用 CSS+DIY， 不 仅 能 够 对 网 页 进行 灵活 的 布局 ， Cy 沾 内 网 页 


je]| 


格 ， 同 时 大 大 提高 样式 代码 的 可 重用 性 ， 并 降低 创建 、 调 整 和 修改 网 页 的 成 本 。 


者 了 解 Web 标 准 网 页 设计 的 基本 原理 ， 掌 握 XHTIL、CssfnbTY 等 最 新 的 网 页 制作 技 “ 国 
页 设计 与 制作 以 及 网 站 开发 与 管理 打下 坚实 的 基础 /9 


示 id “footer” 的 内 容 《/div 加 








| 司 也 得 站 | 


> 人 mtinstance: editable> <p》 1K/1 秒 
a 





图 9-21 使 用 p 元 素 将 整个 文本 分 段 


注意 ;在 基于 HTML 模板 创建 的 网 页 中 ， 只 能 在 可 编辑 区 域 中 编辑 XHTML 文 档 。 而 
在 可 编辑 区 域 之 外 ， 则 不 能 对 XHTML 文档 进行 编辑 或 修改 。 


(4) 保存 XHTML 文档 。 在 菜单 栏 中 选择 “文件 ”|“ 保 存 ” 命 令 ， 在 弹出 的 “另存 
为 ”对 话 框 中 选 定 并 确认 本 地 站 点 courseWebsite 的 根 文 件 夹 ， 并 指定 XHTML 文档 的 文件 
名 index.htm。 然 后 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 保存 XHTML 文档 及 其 中 的 HTML 代码 。 


注意 : 通常 情况 下 ， 将 网 站 的 首页 (Home Page ) 保存 在 站 点 的 根 文件 夹 中 ， 并 且 将 
该 首页 对 应 的 XHTML 文档 名 设 定 为 index.htm， 而 其 他 的 XHTML 文档 则 保存 在 公共 文件 
夹 html 中 。 

(5) 在 Web 浏览 器 中 预览 网 页 。 如 图 9-22 所 示 ， 在 文档 工具 栏 中 单 击 “ 在 浏览 器 中 

预览 /调试 ”按钮 ， 然 后 在 弹出 的 快捷 菜单 中 选择 “预览 在 …” 命 令 ， 即 可 在 Web 浏览 器 
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Nacronedia Dreanweaver 8 - [E:\¥eb Pagevexercisevch09vindex-hta (ZHIIL)] [CE | 区 | 



































国 
> hody> divicontainer> ivimainContent) nmtinstance: editable> [N |@®Y A flo0% vl656 x 197v 2K/1 


9-22 在 Web 浏览 器 中 预览 网 页 
“课程 介绍 ”网 页 如 图 9-23 所 示 。 


课程 介绍 - Windows Internet Explorer 








EE: Web Peacevexereisevehoevindex htn 图 5x| 国 ie 




















此 处 显示 id“container” 的 内 容 


| 
XHTIML+div+CSS+JavaScript 
se 


本 课程 以 HTML 4. 01、XHTML 1. 0 和 CSS 2. 1 技术 规范 为 基础 ， 重 点 讲解 基于 XHTML、div 和 CSS 
的 Web 标 准 网 页 设计 原理 和 制作 技术 - 


与 HTML 相 比 ，XHTML 的 语法 更 加 规范 和 严谨 。CSS 为 网 页 的 样式 设计 提供 了 灵活 的 手段 ， 能 够 

“通过 样式 实现 网 页 的 表现 ”， 并 使 网 页 “表现 ”出 丰富 的 视觉 效果 。 使 用 XHTML 和 CSS， 能 

够 实现 “内 容 和 结构 与 表现 的 分 离 ”。 在 Web 标 准 网 页 设计 与 制作 中 ，“ 内 容 和 结构 ”保存 在 
XHTML 文档 中 ，“ 表 现 ” 的 定义 则 保存 在 CSS 文 档 中 。 在 XHTML 文档 的 头 部 ， 使 用 link 元 素 可 以 
链接 CSS 文 档 中 的 外 部 样式 表 。 在 XHTML 文 档 的 主体 中 ， 如 果 元 素 与 外 部 样式 表 中 的 选择 器 及 

其 规则 匹配 ， 元 素 中 的 内 容 将 按照 规则 中 的 样式 声明 “表现 ”在 网 页 中 。 利 用 div+CSS， 不 仅 
能 够 对 网 页 进行 灵活 的 布局 ， 而 且 能 够 统一 网 站 内 网 页 的 设计 风格 ， 同 时 大 大 提高 样式 代码 的 
可 重用 性 ， 并 降低 创建 、 调 整 和 修改 网 页 的 成 本 。 


本 课程 能 够 帮助 学 习 者 了 解 Web 标 准 网 页 设计 的 基本 原理 ， 掌 握 XHTML、div 和 CSS 等 最 新 的 网 
页 制作 技术 ， 为 今后 的 动态 网 页 设计 与 制作 以 及 网 站 开发 与 管理 打下 坚实 的 基础 。 


此 处 显示 id“footer” 的 内 容 





图 9-23 “课程 介绍 ”网 页 


【 例 9-9】 使 用 Dreamweaver， 在 HTML 模板 基础 上 制作 “课件 下 载 ” 网 页 ( 见 图 
9-24) ， 然 后 将 该 网 页 的 XHTML 文档 保存 在 本 地 站 点 的 公共 文件 夹 html 中 ， 并 命名 为 
download.htm。 要 求 在 网 页 中 创建 表格 ， 并 在 表格 单元 格 中 创建 指向 在 【 例 9-4】 中 制作 的 
八 个 PowerPoint 文件 〈ch01.ppt~ch08.ppt) 的 文本 超 链接 。 
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加 网 |[x| 加 5 
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此 处 显示 id“container” 的 内 容 
此 处 显示 id“charBanner” 的 内 容 








XHTML+div+CSS+JavaScript 
人 绍 ， 课 作 T 载 学习 蕴 南 JavaScript 总 未 





| 章节 教学 课件 网 页 素材 
第 1 章 网 站 与 网 页 FF 载 

第 2 章 使 用 Fireworks 制 作 图 片 F 载 
第 3 章 使 用 Flash 制 作 动画 F 载 
第 4 章 超 文本 标记 语言 (HTML 下 载 
党 5 章 SS 基础 
第 6 章 可 扩展 超 文本 标记 语言 (XHTML) 


























全 7 齐 应 用 DIV+CSS 布 局 网 页 


便 8 章 使 用 Dreamweaver 设 计 和 制作 网 页 
此 处 显示 id “footer” 的 内 容 











图 9-24 “课件 下 载 ” 网 页 


“课件 下 载 ” 网 页 的 主要 制作 步骤 如 下 : 

(1) 在 可 编辑 区 域 中 插入 表格 。 首 先 ， 在 HTML 模板 MyTemplate 基础 上 新 建 XHTML 
文档 ， 在 “设计 ”视图 中 将 光标 定位 于 mainContent 盒子 的 可 编辑 区 域 并 删除 其 中 的 文 
本 。 然 后 ， 在 菜单 栏 中 选择 “插入 ”|“ 表 格 ” 命 令 ， 会 弹出 “表格 ”对 话 框 。 如 图 9-25 
所 示 ， 在 该 对 话 框 中 设置 相关 的 “表格 ”参数 和 属性 ， 再 单 击 “ 确 定 ” 按 钮 ， 即 可 在 可 编 
辑 区 中 插入 表格 。 







































































9-25 设置 “表格 ”参数 和 属性 
然后 ， 按 照 图 9-24 在 表格 中 输入 相关 文本 并 调整 表格 的 列 宽 。 


SS Web 标准 网 页 设计 原理 与 前 端 开 发 技术 


(2) 设置 网 页 标题 。 如 图 9-26 所 示 ， 在 文档 工具 栏 的 “标题 ”文本 框 中 输入 文本 “ 课 
件 下 载 ” 并 按 回 车 键 ， 即 可 设置 网 页 标题 。 然 后 ， 将 XHTML 文档 保存 在 本 地 站 点 的 公共 
文件 夹 html 中 ， 并 命名 为 download.htm。 

(3) 在 文本 上 创建 超 链接 。 如 图 9-26 所 示 ， 首 先 ， 在 表格 里 选中 第 1 章 对 应 的 “下 
载 ”。 然 后 ， 将 鼠标 指针 从 “属性 ”面板 中 的 “指向 文件 ”按钮 拖 放 到 “文件 ”面板 中 的 
PowerPoint 文件 (ch01.ppt) ， 再 释放 鼠标 左 键 ， 即 可 在 文本 “下 载 ” 上 创建 指向 课件 的 超 
链接 。 同 时 ， 在 XHTML 文档 中 对 应 的 td 元 素 内 自动 生成 如 下 代码 : 


<td><a href="../files/ch01.ppt"> 下 载 </a></td> 


其 中 ，a 元 素 的 href 属性 值 使 用 相对 路 径 指向 PowerPoint 文件 ch01.ppt。 
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图 9-26 ”在 文本 上 创建 超 链接 


按照 类 似 的 操作 方法 ， 创 建 指 向 各 章 课件 的 文本 超 链接 。 完 成 后 再 次 保存 XHTML 
文档 。 

【 例 9-10】( 由 读者 自己 完成 ) 使 用 Dreamweaver， 在 HIML 模板 基础 上 制作 “学 习 指 
南 ” 网 页 。 然 后 ， 将 该 网 页 的 XHTML 文档 保存 在 本 地 站 点 的 公共 文件 夹 html 中 ， 并 命名 
为 reference.htm。 在 该 网 页 中 向 学 生 提 供 相 关 开 放 式 课程 网 站 的 链接 ， 这 些 开放 式 课程 网 
站 及 其 网 址 如 表 9-1 所 示 。 






















































































表 9-1 开放 式 课 程 网 站 及 其 网 址 
网 站 名 称 网 址 
w3school 在 线 教程 
莫 课 网 
HIML 4.01 Specification 
XHTML 1.0 (Second Edition) 
CSS 2.1 Specification 
ECMAScript Language Specification 





www.w3school.com.cn 





WWwW.imooc.com 

WwWw.w3.0rg/TR/1999/REC-html401-19991224 
www.w3.org/TR/2002/REC-xhtml1-20020801 
WwWw.w3.0rg/TR/2011/REC-CSS2-20110607 
www.ecma-international.org/publications/standards/Ecma-262.htm 
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“学 习 指 南 ” 网 页 如 图 9-27 所 示 。 




















此 处 显示 id“container” 的 内 容 
此 处 显示 id“charBanner” 的 内 容 


XHTML+div+CSS+JavaScript 


er 
| 网 站 名称 
esSschool 在 线 教程 

HTML 4.01 Specification 

XHTML 1.0 (Second Edition) 
[C55 2.1 Specification 

ECMAScript Language Specification 
此 处 显示 id“footer” 的 内 容 








图 9-27 “学 习 指 南 ” 网 页 


ks 通过 HTML 模板 维护 网 站 


如 图 9-23、 图 9-24 和 图 9-27 所 示 ，“ 课 程 介绍 ”“ 课 件 下 载 ” 和 “学 习 指 南 ” 三 个 
网 页 有 着 相同 的 版 面 布 局 在 三 个 网 页 中 ，charBanner 、cartoonBanner 、naviBar 和 
footer 四 个 div 盒子 矩形 区 域 的 尺寸 及 其 中 的 内 容 都 是 一 样 的。 三 个 网 页 的 差别 只 在 于 网 
页 标题 和 可 编辑 区 域 (mainContent 盒子 矩形 区 域 ) 中 内 容 的 不 同 ， 这 是 因为 三 个 网 页 都 是 
在 同一 个 HIML 模板 (MyTemplatedwt) 基础 上 制作 的 。 而且， 在 HIML 模板 
(MYyTemplate.dwt) 基础 上 制作 网 页 时 ， 只 能 设置 网 页 标题 和 在 mainContent 盒子 中 的 可 编 
辑 区 域内 添加 新 的 网 页 内 容 。 

另 一 方面 ， 对 于 在 同一 个 HTML 模板 基础 上 制作 的 多 个 网 页 ， 可 以 通过 修改 HTML 
模板 来 同时 修改 这 些 网 页 。 这 样 ， 可 以 提高 网 站 的 维护 效率 。 

【 例 9-11】 通 过 HITML 模板 (MyTemplate.dwt) 修改 “课程 介绍 ”“ 课 件 下 载 ” 和 “学 
习 指 南 ” 三 个 网 页 。 具 体 步骤 如 下 : 

(1) 重新 打开 HTML 模板 。 进 入 Dreamweaver 后 ， 在 文件 面板 中 双击 公共 文件 夹 
Templates 中 的 HTML 模板 MyTemplate.dwt， 即 可 在 文档 窗口 中 重新 打开 该 HTML 模板 。 

(2) 删除 无 用 内 容 。 在 每 个 div 元 素 盒子 内 删除 “此 处 显示 id "XXXXXX" 的 内 容 ” 
等 文本 。 

(3) 制作 文字 横幅 。 在 id 属性 值 为 charBanner 的 div 元 素 内 输入 文本 “Web 标准 网 页 
设计 原理 与 制作 技术 ”。 

(4) 制作 网 页 底部 。 在 id 属性 值 为 footer 的 div 元 素 内 输入 文本 “Copyright @ 
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2010-2017 《网 页 设计 与 制作 》 课 程 建 设 小 组 ”， 即 可 制作 网 页 底部 。 

(5) 完成 水 平 导航 条 的 制作 。 如 图 9-28 所 示 ， 在 id 属性 值 为 naviBar 的 div 元 素 盒子 
内 选中 文本 “课程 介绍 ”。 然 后 ， 将 鼠标 指针 从 “属性 ”面板 中 的 “指向 文件 ”按钮 拖 放 
到 “文件 ”面板 中 的 HTML 文件 (index.html) ， 再 释放 鼠标 左 键 ， 即 可 在 文本 “课程 网 
站 ”上 创建 指向 网 页 (indexhtml) 的 超 链接 。 按 照 类 似 的 操作 方法 ， 在 naviBar 盒子 内 的 
文本 “课件 下 载 ” 和 “学 习 指 南 ” 上 创建 指向 对 应 网 页 (download .htm 和 reference.htm) 
的 超 链 接 。 


[<< 模 板 >> WyTeaplate. dwt (XHTEL)*] 
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图 9-28 制作 水 平 导航 条 


切换 到 “代码 ”视图 ， 可 以 发 现 ， 在 纪元 素 的 前 三 个 二 子 元 素 内 自动 插入 了 a 元 素 及 
其 相应 代码 ， 具 体 代码 如 下 : 
<ul> 
<1i><a href="../index.htm"> 课 程 介绍 </a></1i> 
<1i><a href="../html/download.htm"> 课 件 下载 </a></1i> 
<1i><a href="../html/reference.htm"> 学 习 指南 </a></1i> 
<1i>Javascript 演示 </1i> 
</ul> 


(6) 保存 对 HTML 模板 的 修改 。 在 菜单 栏 中 选择 “文件 ”|“ 保 存 ” 命 令 ， 会 弹出 “更 
新 模板 文件 ”对 话 框 。 如 图 9-29(a) 所 示 ， 由 于 index.html、reference.htm 和 download.htm 
三 个 HTML 文件 是 在 HTML 模板 MyTemplate.dwt 基础 上 创建 的 ， 所 以 ，Dreamweaver 会 
提示 “要 基于 此 模板 更 新 所 有 文件 吗 ?”。 在 “更 新 模板 文件 ”对 话 框 中 单 击 “更 新 ” 按 
钮 ， 会 弹出 “更 新 页 面 ” 对 话 框 。 如 图 9-29 (b) 所 示 ， 在 “更 新 页 面 ”对 话 框 中 单 击 “ 关 
闭 ” 按 钮 ， 即 可 保存 对 HTML 模板 的 修改 ， 同 时 完成 对 index.html、reference.htm 和 
download htm 三 个 HTML 文件 的 代码 更 新 。 

再 次 打开 “学 习 指南 ”网 页 (reference.htm) ， 网 页 中 的 内 容 会 发 生变 化 。 如 图 9-30 
所 示 ， 不 仅 文 字 横幅 和 网 页 底部 的 文字 发 生 了 改变 ， 而 且 单 击 水 平 导航 条 中 的 文本 超 链 
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接 ， 可 以 打开 “课程 介绍 ” (indexhtm) 和 “课件 下 载 ” (downloadhtm) 网 页 。 


更 条 神 板 文 件 


要 基于 此 模板 更 新 所 有 文件 吗 ?了 
index. htnl 
html\reference. htm 不 更 新 四 ) 
html vdownlosd htm 

















(a)“ 更 新 模板 文件 ”对 话 框 (b)“ 更 新 页 面 ”对 话 框 
图 9-29 保存 对 HTML 模板 的 修改 
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9-30 更 新 后 的 “学 习 指南 ”网 页 


.no 通过 CSS 文档 定制 网 站 风格 


如 前 所 述 ，CSS 文档 中 的 ID 选择 器 与 XHTML 文档 中 的 div 元 素 相 结合 ， 能 够 实现 网 
页 的 版 面 布局 。 此 外 ， 通 过 CSS 文档 中 的 外 部 样式 表 还 可 以 定制 网 站 风格 。 

【 例 9-12】 通过 CSS 文档 〈defaultcss) 中 的 外 部 样式 表 定 制 网 站 courseWebsite 的 风 
格 。 具 体 步 骤 如 下 : 

(1) 打开 在 【 例 9-6】 中 已 创建 的 CSS 文档 (default.css) ， 准 备 对 其 修改 。 

(2) 增加 全 局 CSS 定义 。 在 外 部 样式 表 中 增加 以 下 三 条 CSS 规则 : 


body { background-color:#FCF; font-family:STSong; } 





table { border-collapse:collapse; margin:20px auto; } 


th, td { padding:8px 16px; border:lpx solid; } 
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这 三 条 CSS 规则 是 对 全 局 共用 的 body、table、 也 和 td 元 素 进行 样式 定义 一 一 无 论 这 
些 元 素 出 现在 任何 HTML 文件 中 的 任何 地 方 ， 都 将 使 网 页 表现 出 统一 的 风格 。 例 如 ， 第 1 
条 CSS 规则 定义 了 网 页 的 背景 颜色 以 及 网 页 中 的 文本 字体 ; 在 第 2 条 CSS 规则 中 ， 特 性 
声明 border-collapse:collapse 定义 合并 式 的 表格 边框 (使 边框 变 为 一 条 实 线 ) ， 特 性 声明 
margin:20px auto 能 够 使 表格 水 平 居 中 ; 在 第 3 条 CSS 规则 中 ， 特 性 声明 border:1px solid 
定义 了 表 头 单元 格 和 数据 单元 格 的 边框 宽度 (1px) 和 边框 样式 〈solid 代表 实 线 ) 。 

(3) 将 CSS 规则 





#footer { width:800px; height:20px; background-color:#FF9; } 
修改 为 

#footer { width:780px; height:20px; padding:1l0px; background-color:#FF9; 

text-align:center; }。 

在 新 的 CSS 规则 中 ， 特 性 声明 text-align:center 能 够 使 网 页 底部 footer 盒子 中 的 文本 
“Copyright @ 2010-2017《 网 页 设计 与 制作 》 课 程 建设 小 组 ”水 平 居中 。 特 性 声明 
padding:10px 能 够 使 footer 盒子 中 的 文本 距离 边框 有 10px 的 空间 。width 特性 值 的 780px 
与 padding 特性 值 的 10px， 能 够 使 footer 盒子 的 横向 尺寸 恰好 为 800px。 

(4) 保存 对 CSS 文档 (default.css〉 的 修改 ， 然 后 使 用 Web 浏览 器 重新 打开 “学 习 指 
南 ” (reference.htm〉 网 页 。 该 网 页 的 显示 效果 如 图 9-31 所 示 。 
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图 9-31 修改 CSS 文档 后 的 “学 习 指南 ”网 页 


kh 规范 化 HTML 文档 


Dreamweaver 是 一 个 具有 可 视 化 编程 功能 的 网 页 制作 工具 。 在 Dreamweaver 中 ， 网 页 
制作 者 使 用 菜单 命令 以 及 各 种 对 话 框 ， 能 够 快速 和 自动 地 生成 大 量 HIML 代码 ， 但 这 些 
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代码 不 一 定 完全 符合 Web 标准 。 尤 其 对 于 Strict 类 型 的 XHTML 文档 ， 在 由 Dreamweaver 
自动 生成 的 HTML 代码 中 可 能 会 出 现 一 些 不 符合 语法 规范 的 代码 。 
例如 ， 在 上 述 “ 课 件 下 载 ” 网 页 (download htm) 中 会 出 现 如 下 HTML 代码 。 
<table width="670" border="1"> 
<tr> 
<th width="425" scope="col"> 章 节 </th> 
<th width="115" scope="col"> 教 学 课件 </th> 


<th width="108"” scope="col"> 网 页 素材 </th> 
/tr> 


</table> 

其 中 ， 在 table 和 也 元素 的 开始 标签 中 使 用 了 width、border 和 scope 等 表现 性 属性 ， 
而 这 与 “内 容 和 结构 与 表现 相 分 离 ” 的 Web 标准 与 原则 相 冲 突 。 另 一 方面 ， 表 现 性 属性 
的 功能 也 可 以 使 用 样式 表 及 CSS 规则 来 替代 ， 而 且 使 用 样式 表 及 CSS 规则 还 能 实现 更 丰 
富 的 表现 。 例 如 ， 在 【 例 9-12】 中 向 CSS 外 部 样式 表 增 加 了 如 下 CSS 规则 : 


th,td { padding:8px 16px; border:lpx solid; } 








该 CSS 规则 中 的 特性 声明 (border:1px solid) 完全 可 以 奉 代 也 和 td 元 素 开 始 标签 中 的 
border 属性 及 其 属性 值 。 同 理 ， 其 他 HTML 元 素 开 始 标签 中 的 width 属性 也 可 以 用 样式 特 
性 width 替代 。 因 此 ， 可 以 将 上 面 一 段 HTML 代码 改写 为 : 

<table> 

<thead> 
KE> 
<th> 章 节 </th><th> 教 学 课件 </th><th> 网 页 素材 </th> 
/ELEY 
</thead> 
<tbody> 
<tr> 


/EE 
</tbody> 
</table> 
显而易见 ， 改 写 后 的 HTML 代码 体现 和 遵循 了 “内 容 和 结构 与 表现 相 分 离 ” 的 Web 
标准 与 原则 ， 因 此 更 加 规范 。 也 正 是 由 于 “内 容 和 结构 与 表现 相 分 离 ”， 使 得 这 段 HIML 
代码 更 加 简洁 ， 更 加 具有 可 读 性 。 


人 @ 人 2 网 页 测试 


在 WWW 技术 中 ，Web 浏览 器 负责 对 HIML、CSS 和 JavaScript 等 文档 中 代码 的 解释 
执行 ， 并 最 终生 成 显示 在 屏幕 上 的 网 页 。 
但 不 同 厂商 的 Web 浏览 器 对 网 页 代码 (包括 HTML、CSS 和 JavaScript 代码 ) 的 解释 
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执行 存在 一 定 的 差异 性 。 在 正 浏 览 器 中 显示 正常 的 网 页 ， 在 Chrome 浏览 器 中 也 许 不 能 正 
常 显示 。 即 使 是 同一 / td Web 浏览 器 ， 对 同一 个 HTML 文档 的 解释 执行 也 可 
能 是 不 一 样 的 。 在 正 11 中 能 够 正常 显示 的 网 页 ， 在 正 8 中 完全 有 可 能 无 法 正常 显示 。 
因此 ， ws 需要 用 不 同 厂商 或 同一 厂商 不 同 版 本 的 Web 浏览 器 来 对 
其 进行 测试 。 如 果 网 页 能 够 在 不 同 厂商 或 同一 厂商 不 同 版 本 的 Web 浏览 器 中 正常 显示 ， 
网 页 制作 才 算 最 终 完 成 。 和 否则， 就 需要 对 HTML 和 CSS 文档 中 的 代码 进行 修改 ， 然 后 对 
网 页 进行 重新 测试 ， 直 至 网 页 通过 测试 。 

根据 StatCounter 公司 2017 年 10 月 的 统计 数据 ， 在 中 国 使 用 的 各 种 桌面 浏览 器 中 ， 
市 场 份额 从 高 到 低 依 次 是 Chrome (61. 62%) 、IE (11. 83%) 、QQ Browser (7. 08%) 、Sogou 
Explorer (5.98%) 、Firefox (4. 61%) 、Edge (2. 31%) 。 为 此 ， 不 妨 选用 Chrome 和 IE 
作为 网 页 测试 的 基准 Web 浏览 器 。 


So 


网 站 建设 需要 做 的 工作 很 多 ， 图 9-32 简要 说 明了 使 用 Dreamweaver 创 建 本 地 站 点 和 进 
行 网 站 建设 的 工作 流程 。 
在 网 站 建设 过 程 中 使 用 HTML 模板 ， 可 以 提高 网 页 制作 效果 。 


| 网 站 规划 与 功能 定位 创建 本 地 站 点 
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网 页 的 版 面 布局 设计 
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创建 HTML 模板 


运用 模板 制作 网 页 






通过 HTML 模 板 维护 网 站 | 










通过 CSS 外 部 样式 表 定制 网 站 风格 















HTML 文 档 规范 化 





使 用 不 同 Web 浏览 器 测试 网 页 





图 9-32 创建 本 地 站 点 和 进行 网 站 建设 的 工作 流程 
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aA | 
在 网 页 中 插入 GIF 图 片 (包括 GIF 动画 ) 有 两 种 方法 。 
第 1 种 方法 是 在 样式 表 的 CSS 规则 中 使 用 background-image 特性 。 有 具体 代码 如 下 : 


#cartoonBanner { background-image:url( 本 /images/cartoonBanner.gif” i 


第 2 种 方法 是 在 HTML 模板 或 HTML 文档 中 使 用 img 元 素 。 具 体 代码 如 下 : 


<img src=“../images/cartoonBanner.gif" alt=" " /> 


在 网 页 中 插入 SWF 动画 ， 需 要 在 HTML 模板 或 HTML 文档 中 使 用 object 元 素 。 


外 们 习题 


1. 分 别 使 用 以 下 三 种 不 同方 法 制作 本 章 课程 网 站 的 动画 横幅 。 

(1) 在 外 部 样式 表 的 CSS 规则 中 ， 使 用 background-image 特性 插入 GIF 动画 。 
(2) 在 HTML 模板 或 HTML 文档 中 ， 使 用 img 元 素 插入 GIF 动画 。 

(3) 在 HTML 模板 或 HTML 文档 中 ， 使 用 object 元 素 插入 SWF 动画 。 

2. 按照 图 9-33 中 的 要 求 ， 进 一 步 修改 CSS 文档 (default.css〉 中 的 外 部 样式 表 。 
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和 @@ 将 文字 横幅 中 的 文 

tet A > 本 设置 为 40px、 粗 体 、 
XHTML+div+CSS+JavaScript 居中 、 绿 色 ， 且 距离 
charBar 盒子 边界 20px 


课程 以 RTML 4. 01、XBTML 1. 0 和 CSS 2. 1 技术 规范 为 基础 ， 重 点 讲解 基于 XHTML、 
rene 


与 HTML 相 比 XHTML 的 语法 更 加 规范 和 严谨 。 5 六 网 页 的 可 六 设计 提包 了 天 洛 的 巴 一 轩 ”“ 忆 将 段 沙 的 首 行 缩 进 
能 够 “通过 样式 实现 网 页 的 表现 ”， 并 使 网 页 “表现 ” 
表现 人 和 设置 为 两 个 字符 
和 » 
而 且 能 够 议 一 网 站 内 网 
页 的 设计 风格 ， et eT 


本 课程 能 够 帮助 学习 者 了 解 Web 标 准 网 页 设计 的 基本 原理 ， 党 番 XHTML、div 和 CSS 等 最 
新 的 网 页 制作 技术 ， 为 今后 的 动态 网 页 设计 与 制作 以 及 网 站 开 直 与 管理 打下 笃 实 的 基于 
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9-33 ”进一步 修改 CSS 文档 的 要 求 


3. 对 本 章 各 例 中 的 网 页 及 其 XHTML 文档 进行 规范 化 修改 。 


4. 为 本 课程 网 站 设计 一 个 LOGO， 以 体现 本 课程 的 主旨 或 突出 Web 标准 的 精 艇 ， 然 
后 将 该 LOGO 加 入 到 课程 网 站 。 








JavaScript 基础 | 


JavaScript 是 目前 万 维 网 上 最 流行 的 脚本 语言 (Script Language) 。JavaScript 使 Web 
浏览 器 及 客户 机 端 〈Client-Side) 具备 了 编写 和 运行 程序 的 能 力 。 使 用 JavaScript， 可 以 向 
HTML 文档 写 入 HTML 代码、 验证 表单 数据 和 为 页 面 添加 动态 特性 。 


(0 JavaScript 放置 


JavaScript 既 可 以 出 现在 HTML 文档 的 主体 或 头 部 ， 也 可 以 单独 保存 在 外 部 脚本 文 
档 中 。 


10.1.1 在 HTML 文档 主体 直接 插入 JavaScript 


使 用 script 元 素 ， 可 以 在 HTML 文档 主体 直接 插入 JavaScript。 在 JavaScript 中 ， 可 以 
向 HTML 文档 写 入 包括 元 素 标 签 和 文本 内 容 在 内 的 HIML 代码 。 
【 例 10-1】 在 Web 浏览 器 中 输出 乘法 表 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 在 HTML 文档 主体 直接 插入 Javascript</title> 
</head> 
<body> 
<script type="text/javascript"> 
| 
// 使 用 document 对 象 的 write 方法 ， 可 以 向 HTML 文档 写 入 元 素 标签 和 文本 内 容 
document .write ("<h1> 乘 法 表 </h1>") 
for (i=1;i<=9;i++) { 
for (j=1;j<=i;j++) 
document .write (i+"*"+j+"="+i*#j+" ") 
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document .write ("<br/>") 
} 
</script> 
</body> 
</html> 


注意 : 

(1) 在 HTML 文档 主体 插入 JavaScript， 需 要 使 用 script 元 素 ， 并 在 其 开始 标签 中 将 
type 属性 值 设置 为 text/javascript。 这 样 ， 开 始 标签 <script type="text/javascript"> 和 结束 标 
签 </script> 就 可 以 告诉 Web 浏览 器 JavaScript 从 何 处 开始 、 在 何 处 结束 。 

(2) 在 JavaScript 中 ， 变 量 名 的 书写 必须 遵循 以 下 两 条 规则 : 

@ 变量 名 是 区 分 字母 大 小 写 的。 例如 ，x 和 和 代表 两 个 不 同 的 变量 。 

@ 变量 名 必须 以 字母 、 下 画 线 (_) 或 美元 符号 ($) 开始 。 

(3) 在 JavaScript 中 ， 使 用 保留 字 var 定义 变量 。 定 义 变量 时 ， 无 须 指 明 变 量 的 类 型 。 

(4) document 是 JavaScript 中 的 常用 对 象 。 使 用 该 对 象 的 write 方法 ， 可 以 向 HTML 
文档 写 入 包括 元 素 标签 和 文本 内 容 在 内 的 HTML 代码 ， 这 些 HTML 代码 能 被 Web 浏览 器 
解析 并 在 Web 浏览 器 中 进行 相应 的 输出 。 

(5) 对 于 在 HTML 文档 主体 插入 的 JavaScript， 在 Web 浏览 器 加 载 HTML 文档 时 就 
会 被 执行 。 

(6) 在 JavaScript 中 ， 可 以 由 多 条 语句 组 成 语句 块 。 语 句 块 以 左 花 括号 开始 ， 以 右 花 
括号 结束 。 

(7) 为 了 增强 代码 的 可 读 性 ， 在 JavaScript 中 可 以 添加 单行 注释 或 多 行 注释 。 单 行 注 
释 以 /开始 ， 多 行 注释 以 /# 开头 、 以 */ 结尾 。 

(8) 利用 Web 浏览 器 的 漏洞 编制 的 一 些 恶意 JavaScript 可 能 会 威胁 网 页 浏览 者 的 计算 
机 系统 。 因 此 ， 在 加 载 含 有 JavaScript 的 HIML 文档 时 ， 安 全 级 别 设置 较 高 的 Web 浏览 器 
会 阻止 JavaScript 代码 的 运行 ， 如 图 10-1 所 示 。 这 时 ， 可 以 单 击 提示 信息 栏 并 在 弹出 的 快 
捷 菜 单 中 选择 “允许 阻止 的 内 容 ” 命 令 ， 然 后 在 弹出 的 “安全 警告 ”对 话 框 中 单 击 “是 ” 
按钮 ， 即 可 运行 HTML 文档 中 的 JavaScript。 


让 乘法 表 Windows Internet Explorer 


& oy [全 回 E:\Web Page\ 


均 收 W 天 | 大 条 法 下 




















作 、 区 时 


您 确实 要 让 此 文件 运行 活动 内 容 吗 ? 


Cavw ]Csm 








10-1 含有 JavaScript 的 HTML 网 页 被 IE 浏览 器 阻止 
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(9) 在 Web 浏览 器 中 输出 的 乘法 表 如 图 10-2 所 示 ， 但 虚线 中 的 个 别 等 式 还 需 前 后 


二 乘法 表 - Windows Internet Explorer 
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图 10-2 在 Web 浏览 器 中 输出 乘法 表 


(10 ) 虽然 可 以 使 用 记事 本 (notepad.exe ) 软件 编辑 HTML 代码 和 JavaScript， 但 仍然 
建议 使 用 Dreamweaver 软件 。 如 图 10-3 所 示 ， 在 Dreamweaver 的 HTML 编辑 器 中 输入 
JavaScript 时 ， 容 易 根据 特定 代码 之 间 的 颜色 差异 发 现 一 些 明显 的 JavaScript 语法 错误 。 








<body> 
《script type= "text/javascript “> 
Var 1l, ] 
/使 用 docunent 对 象 的 write 方法 ， 可 以 向 HTIL 文 档 写 入 元 素 标签 


} 
document. write("<br/>") 
} 
/script> 
《Abody> 





10-3 ”使 用 Dreamweaver 软件 编辑 JavaScript 代码 
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10.1.2 在 IE 浏览 器 中 调试 JavaScript 





从 正 8 开始， 微软 在 正 浏览 器 中 内 置 了 一 个 JavaScript 调试 器 (Debugger) ， 但 在 默 
认 状态 下 该 调试 器 是 关闭 的 。 可 以 按照 以 下 步骤 启动 正 浏览 器 内 置 的 JavaScript 调试 器 。 

(1) 在 正 浏览 器 的 菜单 中 选择 “工具 ”|“Intemet 选项 ”命令 ,可 以 打开 “Intemet 

项 ”对 话 框 。 

(2) 如 图 10-4 所 示 ， 在 “Internet 选项 ”对 话 框 中 单 击 “ 高 级 ”选项 卡 ， 取 消 选 中 
“浏览 ”部 分 中 的 “禁用 脚本 调试 (Intermet Explorer) ” 复 选 框 。 然 后 ， 单 击 下 方 的 “ 确 
定 ” 按 钮 ， 即 可 启动 正 浏览 器 内 置 的 JavaScript 调试 器 。 























Internet 选项 
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仅 在 浏览 器 处 于 无 法 使 用 的 状态 时 ， 才 使 用 此 设置 


rc nm 瓦 用 Q) 








图 10-4 启动 IE 浏览 器 内 置 的 JavaScript 调试 器 


启动 下 浏览 器 内 置 的 JavaScript 调试 器 后 ， 可 以 通过 以 下 两 种 方式 之 一 打开 用 于 调试 
JavaScript 的 “开发 人 员工 具 ” 窗 口 。 

方式 一 : 如 果 在 JavaScript 中 存在 一 些 明 显 的 语法 错误 ， 则 用 正 浏览 器 打开 HIML 
文档 时 ， 会 弹出 “网 页 错误 ”对 话 框 。 如 图 10-5 所 示 ， 在 “网 页 错误 ”对 话 框 中 单 击 
“是 ”按钮 ， 可 以 打开 “开发 人 员工 具 ” 窗 口 。 





是 否 要 调试 此 页 面 ? 
© Me 
条 现 在 不 起 测试 此 页 击 ， 则 单 击 “省”。 


| 





10-5 “网 页 错误 ”对 话 框 
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如 图 10-6 所 示 ， 在 “开发 人 员工 具 ” 窗 口 的 “脚本 ”选项 卡 中 将 直接 指示 错误 出 现 
的 位 置 并 给 出 相关 的 错误 提示 。 根 据 这 些 错误 提示 ， 可 以 在 JavaScript 编辑 器 中 修改 错误 
代码 ， 然 后 用 正 浏览 器 重新 打开 网 页 或 在 正 浏览 器 中 “刷新 ”网 页 。 


[L 文 灯 
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10 script type="text/javascript"> 











id 10-1 htm， 行 14 字符 8 
11 war ij 
12 已 使 用 docaument 对 象 的 write 方法 ， 可 以 向 HTIIL 1 9 
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图 10-6 在 “脚本 ”选项 卡 中 直接 指示 错误 出 现 的 位 置 并 给 出 相关 的 错误 提示 


方式 二 : 如 果 在 JavaScript 中 不 存在 语法 错误 ， 则 可 以 用 正 浏览 器 直接 打开 HTML 
文档 ， 然 后 在 菜单 栏 中 选择 “工具 ”|“ 开 发 人 员工 具 ” 命 令 (或 直接 按 F12 键 ) ， 也 可 以 
打开 “开发 人 员工 具 ” 窗 口 。 在 “开发 人 员工 具 ” 窗 口中 单 击 “ 脚 本 ”选项 卡 ， 即 可 看 到 
JavaScript。 

在 “开发 人 员工 具 ” 窗 口中 ， 可 以 在 JavaScript 中 设置 断 点 、 启 动 调 试 、 停 止 调试 和 
查看 局 部 变量 的 当前 值 。 如 图 10-7 所 示 ， 在 “开发 人 员工 具 ” 窗 口中 单 击 “ 脚 本 ”选项 
发， 可 以 在 左边 面板 中 看 到 JavaScript。 
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图 10-7 在 “开发 人 员工 具 ” 窗 口中 调试 JavaScript 
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(1) 设置 断 点 。 在 “开发 人 员工 具 ” 窗 口 的 左边 面板 中 ， 单 击 JavaScript 代码 行 左 侧 
的 行 号 ， 即 可 在 当前 JavaScript 代码 行 设置 断 点 。 此 时 ， 在 JavaScript 代 码 行 号 的 左 侧 会 出 
现 一 个 标识 断 点 的 红色 圆 点 。 

(2) 启动 调试 。 在 “开发 人 员工 具 ” 窗 口 的 工具 栏 中 ， 单 击 “ 启 动 调试 ”按钮 ， 即 可 
启动 JavaScript 的 调试 ， 同 时 “启动 调试 ”按钮 转换 为 “停止 调试 ”按钮 。 如 果 在 启动 调 
试 之 前 预先 设置 了 断 点 ，JavaScript 会 于 断 点 所 在 代码 行 自动 暂停 执行 。 

(3) 查看 局 部 变量 的 当前 值 。JavaScript 暂停 执行 后 ， 可 以 在 “开发 人 员工 具 ” 窗 口 
的 右边 面板 中 单 击 “ 局 部 变量 ”选项 卡 ， 即 可 查看 局 部 变量 的 当前 值 。 

注意 : 如 果 “ 停 止 调 试 ”后 重新 “启动 调试 ”， 必 须 在 下 浏览 器 中 “刷新 ”网 页 ， 之 
后 才能 再 次 调试 JavaScript。 


10.1.3 ” JavaScript 函数 


在 程序 设计 中 ， 函 数 (Function) 是 一 个 具有 可 重用 性 的 语句 块 ， 可 反复 用 来 完成 基 
个 特定 功能 。 

通常 将 需要 反复 执行 的 多 条 语句 组 织 在 一 个 函数 中 ， 而 在 需要 时 通过 函数 调用 执行 
其 中 的 语句 。 因 此 ， 函 数 能 够 实现 程序 设计 的 模块 化 。 

JavaScript 既 提 供 了 系统 预先 定义 的 函数 ， 也 允许 用 户 根据 需要 自行 定义 函数 。 

在 JavaScript 中 ， 可 以 按照 以 下 语法 定义 函数 : 

function function name(argl,arg2,*,argN) { 

statements 


[return expression ] 
} 


其 中 ，function 是 JavaScript 中 用 来 定义 函数 的 保留 字 。function name 是 函数 名 。 
argX 称 为 参数 变量 ， 也 称 “ 形 式 参数 ”。 一 个 函数 可 以 没有 形式 参数 ， 也 可 以 有 多 个 形 
式 参 数 。argl,arg2,…,argN 是 形式 参数 列表 ， 形 式 参 数 之 间 用 逗号 隔 开 。 在 函数 定义 中 声 
明 形 式 参 数 时 ， 无 须 指明 形式 参数 的 类 型 。statements 是 由 若干 条 语句 组 成 的 函数 体 。 使 
用 retum 语句 〈 即 代码 retum expression) 可 以 返回 函数 值 ， 但 retum 语句 是 可 选项 一 一 如 
果 省 略 retum 语句 ， 则 函数 没有 返回 值 。 








10.1.4 在 HTML 文档 头 部 定义 JavaScript 函数 


除 在 HTML 文档 主体 直接 插入 JavaScript 外 ， 也 可 以 先 在 HIML 文档 头 部 定义 
JavaScript 函数 ， 然 后 在 HIML 文档 主体 通过 函数 调用 执行 JavaScript 函数 中 的 语句 。 

【 例 10-2】 在 HTML 文档 头 部 定义 函数 printMultiplicationTable， 该 函数 能 够 在 Web 
浏览 器 中 输出 乘法 表 ， 然 后 在 HIML 文档 主体 调用 该 函数 。XHTML 及 JavaScript 代码 
如 下 : 


<!DOCTYPE html PUBLIC "“-//W3C//DTD XHTML 1.0 Strict//EN" 
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"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-—strict.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/zxhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 

<title>JavaScript 函数 </title> 

<script type="text/javascript"> 

// 在 头 部 定义 函数 printMultiplicationTable 
function printMultiplicationTable() { 
Var 73 
document .write ("<h1> 乘 法 表 </h1>") 
for (i=1;i<=9;i++) { 
for (j=1;j<=i;j++) 
document .write (i+"*"+j+"="+i*#j+" ") 
document .write ("<br/>") 
} 
} 

</script> 
</head> 
<body> 

<script type="text/javascript"> 

// 在 主体 调用 函数 printMultiplicationTable 
printMultiplicationTable() 
// 第 2 次 调用 函数 printMultiplicationTable 
printMultiplicationTable() 

</script> 

</body> 

</html> 

注意 : 

@ 如 果 以 函数 形式 将 JavaScript 组 织 在 HTML 文档 头 部 ， 并 在 HTML 文档 主体 调用 
这 些 函数 ， 在 Web 浏览 器 加 载 HTML 文档 时 ， 就 会 首先 加 载 在 头 部 定义 的 JavaScript 函数 
及 其 中 的 语句 。 之 后 ， 在 HTML 文档 主体 即 可 通过 函数 调用 执行 JavaScript 函数 中 的 
语句 。 

@) 在 HIML 文档 头 部 定义 JavaScript 函数 、 在 HIML 文档 主体 调用 JavaScript 函数 ， 
都 需要 使 用 script 元 素 。 

@ 通过 调用 JavaScript 函数 ， 在 HIML 文档 主体 可 以 多 次 执行 函数 中 的 JavaScript 代 
码 ， 而 无 须 在 HIML 文档 的 多 个 地 方 重复 出 现 相同 的 JavaScript 代码 。 这 样 ， 不 仅 可 以 实 
现 JavaScript 的 模块 化 设计 ， 而 且 能 够 提高 JavaScript 的 编程 效率 。 

图 函数 printMultiplicationTable 没有 返回 值 ， 但 可 以 实现 输出 乘法 表 的 功能 。 





10.1.5 在 外 部 脚本 文档 定义 JavaScript 函数 


很 多 时 候 ， 需 要 在 多 个 HIML 文档 中 执行 一 组 相同 的 JavaScript 语句 。 此 时 ， 可 以 以 


第 10 章 ， JavaScript 基础 a 


函数 形式 将 这 些 JavaScript 语句 组 织 和 保存 在 以 js 为 扩展 名 的 脚本 文档 中 。 然 后 ， 在 HTML 
文档 中 调用 外 部 脚本 文档 中 的 JavaScript 函数 。 这 样 ， 在 多 个 HTML 文档 中 即 可 执行 相同 
的 JavaScript 语句 。 

【 例 10-3】 在 HIML 文档 中 调用 外 部 脚本 文档 中 的 JavaScript 函数 。 

(1) 将 以 下 JavaScript 函数 及 其 中 的 语句 保存 在 脚本 文档 〈10-3.js) 中 。 


function printMultiplicationTable() { 


Var i,j 


document .write ("<h1> 乘 法 表 </h1>") 
for(i=1;i<=9;i++) { 
for (j=1;j<=i;j++) 
document .write (i+"*"+j+"="+i*j+" ") 
document .write ("<br/>") 
} 
} 


注意 : 

GD 可 以 使 用 Dreamweaver 的 JavaScript 编辑 器 输入 JavaScript。 与 在 Dreamweaver 的 
HTML 编辑 器 中 输入 JavaScript 类 似 ， 在 JavaScript 编辑 器 中 输入 JavaScript 时 ， 同 样 容易 
根据 特定 代码 之 间 的 颜色 差异 发 现 一 些 明 显 的 JavaScript 语法 错误 。 

@ 在 外 部 脚本 文档 中 无 须 使 用 、 也 不 能 使 用 script 元 素 及 其 标签 ， 且 只 能 包含 
JavaScript 函数 及 其 中 的 语句 。 

@ 外 部 脚本 文档 的 扩展 名 为 js， 即 JavaScript 的 缩写 。 


(2) 在 HIML 文档 〈10-3.htm) 中 使 用 如 下 代码 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 在 XHTML 文档 中 调用 在 外 部 脚本 文档 中 定义 的 Javascript 函数 </title> 
<!-- 在 script 元 素 的 开始 标签 中 使 用 src 属性 指定 外 部 脚本 文档 --> 
<script type="text/javascript" src="10-3.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
// 调 用 在 外 部 脚本 文档 中 定义 的 Javascript 函数 printMultiplicationTable 
printMultiplicationTable() 
</script> 
</body> 
</html> 
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注意 : 

@ 在 HIML 文档 头 部 使 用 script 元素 及 其 src 属性 ， 可 以 指向 定义 有 JavaScript 函数 
的 外 部 脚本 文档 。 这 样 ， 在 Web 浏览 器 加 载 HTML 文档 的 同时 ， 也 将 加 载 外 部 脚本 文档 
中 的 JavaScript 函数 及 其 中 的 语 自 。 

@ 在 HIML 文档 主体 的 script 元 素 内 ， 通 过 JavaScript 函数 名 并 提供 相应 的 参数 变量 
(也 称 实际 参数 ) ， 即 可 调用 在 外 部 脚本 文档 中 定义 的 JavaScript 函数 ， 然 后 执行 函数 中 的 
JavaScript 语句 。 


(02 变量 和 类 型 


10.2.1 变量 


同 其 他 程序 设计 语言 类 似 ， 在 JavaScript 中 ， 变 量 (Variable) 用 于 存储 可 以 变化 的 数 
据 。 

在 JavaScript 中 ， 可 以 使 用 保留 字 var 定义 变量 。 使 用 一 个 保留 字 var 可 以 同时 定义 多 
个 变量 。 

在 JavaScript 中 ， 变 量 名 的 书写 必须 遵循 以 下 两 条 规则 : 

(1) 变量 名 是 区 分 字母 大 小 写 的 (Case Sensitive) 。 例 如 ，x 和 X 代表 两 个 不 同 的 变量 。 

(2) 变量 名 必须 以 字母 、 下 画 线 (_) 或 美元 符号 〈$) 开头 ， 后 面 可 以 跟 字母 、 下 面 
线 、 美 元 符号 和 数字 。 

此 外 ， 当 变量 名 由 多 个 英文 单词 组 成 时 ， 建 议 遵循 以 下 原则 : 

(1) 变量 名 中 的 英文 单词 尽量 使 用 名 词 。 

(2) 第 1 个 英文 单词 全 部 小 写 ， 以 后 每 个 英文 单词 的 第 1 个 字母 大 写 ， 如 
ImyBookName。 


10.2.2 ”类 型 


在 JavaScript 中 ， 变 量 或 数据 主要 有 以 下 几 种 类 型 (Types) 。 
(1) boolean 类 型 。 这 种 类 型 有 两 个 值 ， 即 tue 和 false。 
(2) number 类 型 。 这 种 类 型 支持 整数 和 浮 点 数 ， 并 且 这 种 类 型 的 变量 或 数据 可 以 参 





与 算术 运算 。 
(3) string 类 型 。 这 种 类 型 没有 固定 大 小 ， 并 且 这 种 类 型 的 值 由 一 个 字符 串 构成 。 
(4) undefined 类 型 。 这 种 类 型 的 值 只 有 一 个 ， 即 undefined。 当 一 个 变量 只 是 被 定 


义 、 但 还 没有 被 赋值 时 ， 该 变量 的 类 型 和 值 都 是 undefined。 
(5) object 类 型 。 这 种 类 型 的 变量 可 以 指向 一 个 对 象 ， 如 数组 对 象 。 
(6) function 类 型 。 可 以 先 定义 函数 再 将 函数 名 赋值 给 这 种 类 型 的 变量 ， 也 可 以 将 函 
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数 及 其 定义 直接 赋值 给 这 种 类 型 的 变量 。 
其 中 ，boolean、number、string 和 undefined 属于 原始 数据 类 型 (Primitive Data Type ) 。 
在 JavaScript 中 ， 使 用 typeof 运算 符 可 以 返回 变量 的 类 型 。 

【 例 10-4】 使 用 typeof 运算 符 测试 变量 的 类 型 。HTML 文档 主体 中 的 JavaScript 代码 
如 下 : 


<script type="text/javascript"> 
var b=true; document .write ("变量 b 的 类 型 为 "+ (typeof b)+"， 值 是 "+b+"<br/>"); 
varnl=100; ”document .write (" 变 量 nl 的 类 型 为 "+ (typeof n1) +", 值 是 "+nl+"<br/>") 
varn2=3.14; document .write (" 变 量 n2 的 类 型 为 "+ (typeof n2)+", 值 是 "+n2+"<br/>") 
Varn2="C#"; document .write (" 变 量 n2 的 类 型 为 "+ (typeof n2)+", 值 是 "+n2+"<br/>") 
var s="Java"; document .write ("变量 s 的 类 型 为 "+ (typeof s)+"， 值 是 "+s+"<br/>") 
var us; document .write ("变量 u 的 类 型 为 "+ (typeof u)+"， 值 是 "+u+"<br/>") 7 














var o=null; ”document .write ("变量 o 的 类 型 为 "+ (typeof o)+"， 值 是 "+ot"<br/>"); 
Var o={ "name":"Bob", "age":22 }; 

document .write ("变量 o 的 类 型 为 "+ (typeof o) +"，name 属性 值 是 "+o.name+"，age 
属性 值 是 "+o.aget"<br/>"); 


function addl(a,b) { return a+b } 
var f=add  // 将 函数 名 add 赋值 给 变量 f 
document .write ("变量 f 的 类 型 为 "+ (typeof f)+"， 值 是 "+f+"<br/>") 
var reVal=f(2,3)  // 通 过 变量 工 调 用 函数 add 
document .write ("函数 add 的 返回 值 是 "+reVal+"<br/>") 

</script> 


使 用 正 浏览 器 打开 的 网 页 如 图 10-8 所 示 。 











ET 编辑 (E) ”查看 (V) ”收藏 夫 (A) ”工具 (T) 帮助 (H) 


变量 b 的 类 型 为 boolean， 值 是 true 
诡 量 噶 的 基 开 为 number, 值 是 100 





Tn 
属性 桔 是 Bob, Cage 属 性 入 是 22 
由 是 function add(a,b) { return atb } 

















图 10-8 变量 的 值 及 其 类 型 
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注意 : 

@ 在 JavaScript 中 ， 保 存 整 数 和 浮 点 数 的 变量 都 属于 number 类 型 。 

@ 在 JavaScript 中 ， 使 用 保留 字 var 定义 变量 时 ， 无 须 指定 变量 的 类 型 。 因 此 ，JavaScript 
是 一 种 弱 类 型 语言 。 此 外 ， 变 量 的 类 型 是 由 其 所 保存 数据 的 类 型 决定 的 ， 并 且 可 以 发 生变 
化 。 如 本 例 中 ， 当 n2=3.14 时 ， 变 量 n2 的 类 型 是 number; 当 n2="C#" 时 ， 变 量 n2 的 类 型 
是 string。 但 不 建议 在 程序 中 使 用 同一 变量 保存 不 同类 型 的 数据 。 

@ 在 JavaScript 中 ， 允 许 在 同一 行 中 书写 多 条 语句 。 此 时 ， 除 最 后 一 条 语句 外 ， 每 条 
语句 必须 用 分 号 (;) 结束 ， 但 建议 每 条 语句 均 以 分 号 (;) 结束 。 

图 在 本 例 中 ， 当 object 类 型 变量 o 的 值 为 null 时 ， 表 示 该 变量 尚未 指向 任何 对 象 。 
之 后 ， 变 量 o 保存 的 是 一 个 “学 生 ” 对 象 及 其 数据 ， 该 “学 生 ” 对 象 有 name 和 age 两 个 
属性 一 一 name 属性 值 是 字符 串 "Bob"，age 属性 值 是 整数 22。 

回 在 本 例 中 ， 先 定义 函数 add， 再 将 函数 名 add 赋值 给 function 类 型 的 变量 f， 之 后 
即 可 通过 变量 f 调 用 函数 add。 换 言 之 ， 可 以 将 函数 当 作 变 量 使 用 。 


《0 3 运算 符 与 表达 式 


同 其 他 程序 设计 语言 类 似 ， 在 JavaScript 中 ， 可 以 通过 各 种 运算 对 数据 进行 加 工 和 处 
理 。 描 述 各 种 运算 的 符号 称 为 运算 符 ， 参 与 运算 的 数据 称 为 操作 数 。 常 量 和 变量 是 最 常见 
的 操作 数 。 使 用 操作 数 、 运 算 符 、 函 数 调用 以 及 配对 的 圆 括号 ， 可 以 构成 表达 式 。 在 
JavaScript 中 ， 依 据 操作 数 以 及 运算 结果 的 类 型 ， 运 算 符 和 表达 式 通常 分 为 以 下 几 类 。 

1. 算术 运算 符 与 算术 表达 式 

在 JavaScript 中 ， 算 术 运 算 符 (Arithmetic Operators) 负责 算术 运算 。 表 10-1 列 出 了 
在 JavaScript 中 常用 的 算术 运算 符 。 参 与 算术 运算 的 变量 和 数据 应 该 属于 number 类 型 。 使 
用 算术 运算 符 可 以 构成 算术 表达 式 。 

表 10-1 算术 运算 符 与 算术 表达 式 
算术 表达 式 (假设 a=2) 
at3 | 
| 
a*2 





























注意 : 自 增 ( 自 减 ) 运算 符 可 以 位 于 变量 名 之 后 ， 也 可 以 位 于 变量 名 之 前 ， 但 所 构成 
表达 式 的 值 则 不 相同 。 并 且 ， 在 自 增 ( 自 减 ) 运算 之 后 ， 变 量 的 值 会 自动 增加 (减少 ) 1。 

2. 关系 运算 符 与 关系 表达 式 

如 表 10-2 所 示 ， 关 系 运算 符 〈Relational Operators) 负责 判断 两 个 值 是 否 满足 给 定 的 
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比较 关系 。 使 用 关系 运算 符 可 以 构成 关系 表达 式 。 
表 10-2 关系 运算 符 与 关系 表达 式 




















关系 表达 式 〈 假 设 x=55,y=88,z="55") 表达 式 的 值 
X 一 y，X- 一 Z false, true 

x—z false 

x!=y true 

== true 

X>y false 

X<y true 

x>=y false 

xX<=y true 





注意 : 

@ 在 关系 表达 式 中 ， 参 与 关系 运算 的 操作 数 可 以 是 number 或 string 类 型 的 变量 或 
数据 。 

@) 关系 表达 式 的 值 是 boolean 类 型 ， 即 true 或 false。 

3. 逻辑 运算 符 与 逻辑 表达 式 

如 表 10-3 所 示 ， 风 辑 运算 符 (Logical Operators) 包括 && (与 ) 、|| (或 ) 和 ! ( 非 ) 
种 。 参 与 风 辑 运算 的 操作 数 通 常 是 关系 表达 式 ， 也 可 以 是 boolean 类 型 的 变量 。 使 用 由 
辑 运 算 符 可 以 构成 逻辑 表达 式 。 

表 10-3 ” 远 辑 运算 符 及 逻辑 表达 式 
束 辑 运算 符 远 辑 表达 式 《 假 设计 6Y3) 


G=-5l 一 5) 
| 非 Gy) 





注意 : 与 关系 表达 式 类 似 ， 逻 辑 表达 式 的 值 也 是 boolean 类 型 ， 即 true 或 false。 因 
此 ， 通 常 将 关系 表达 式 和 逻辑 表达 式 统称 为 布尔 表达 式 。 

4. 字符 串 连接 运算 符 

对 于 string 类 型 的 
和 运算， 这样 可 以 将 两 个 字 


数据 ， 可 以 使 用 字符 串 连接 运算 符 “+” 进 行 连接 (Concatenation) 
守 串 前 后 连接 起 来 。 例 如 ， 以 下 JavaScript 代码 : 






Var sl="Java", s2="Script", s3; 
S3=S1+327 


document .write ("sS1="+S1+" S2="+S2+" Sl1+S2="+S3+"<br/>"); 
可 以 在 Web 浏览 器 中 输出 : 
sl=Java s2=Script sl+s2=JavaScript 


注意 : 在 上 述 JavaScript 代码 中 ,第 1、2、3、4、5、7 和 8 个 “+” 是 字符 串 连接 运 
算 符 ， 但 第 6 个 “1” 则 不 是 字符 囊 连 接 运算 符 。 
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5. 赋值 运算 符 

在 JavaScript 中 ， 基 本 的 赋值 运算 符 (Assignment Operators) 是 “=” 符 号 ， 它 将 其 右 
边 表 达 式 的 值 赋 给 左边 的 变量 。 此 外 ，JavaScript 还 支持 带 操 作 的 赋值 运算 符 ， 如 表 10-4 
所 示 。 


表 10-4 ”赋值 运算 符 

















由 此 可 见 ， 当 赋值 运算 符 左 边 的 变量 在 赋值 运算 符 右边 也 作为 第 1 个 操作 数 参与 运算 
时 ， 可 以 使 用 带 操作 的 赋值 运算 符 。 

【 例 10-5】 验证 运算 符 与 表达 式 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 
<script type="text/javascript"> 

Var x=12, y=5 

X%=Yy 

document .write ("x="+x+"<br/>") 

X=y-- 

document .write ("x="+x+" y="+y+"<br/>") 


var bl=false, b2=true 
bl=blgg&b2; document.write("bl="+bl+"<br/>"); 


Var sl="Java", s2="Script" 
S1+=S2+X7 document .write ("s1="+S1+"<br/>") 7 
</script> 


上 述 JavaScript 在 Web 浏览 器 中 的 输出 如 下 : 


X=2 

X=5 y=4 
bl=false 
sl=JavaScript5 


注意 : 

@ 在 JavaScript 中 ， 可 以 使 用 分 号 (;) 表 示 一 条 语句 的 结束 ; 如 果 每 条 语句 都 在 不 同 
的 行 中 ， 可 以 省 略 分 号 (;); 如 果 多 条 语句 在 同一 行 中 ， 除 最 后 一 条 语句 外 ， 不 能 省 略 分 
雪 (3 

@) 当 表达 式 中 只 有 number 类 型 的 变量 或 数据 时 ，“+” 是 一 个 算术 运算 符 ; 当 表达 
式 中 只 有 string 类 型 的 变量 或 数据 时 ，“+” 则 是 一 个 字符 串 连接 运算 符 。 

@@ 当 表 达 式 中 既 有 number 类 型 、 又 有 string 类 型 的 变量 或 数据 时 ，“+” 是 一 个 字符 
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串 连 接 运 算 符 。 此 时 ， 表 达 式 中 number 类 型 的 数据 会 被 隐 式 地 转换 为 string 类 型 的 数据 ， 
然后 参与 字符 串 的 连接 运算 。 例如， 在 上 述 语 句 sl+=s2+x 中 ，number 类 型 的 变量 X 就 被 
隐 式 地 转换 为 string 类 型 的 数据 ， 然 后 参与 字符 串 的 连接 运算 。 

6. 条 件 运 算 符 (Conditional Operator) 

条 件 运算 符 〈 ?: ) 是 JavaScript 中 常见 的 运算 符 ， 并 且 经 常 和 赋值 运算 符 共 同 构成 
赋值 语句 ， 其 基本 形式 为 : 

variable = boolean expression ? true value : false _ value 


该 赋值 语句 将 根据 布尔 表达 式 boolean_expression 的 值 有 条 件 地 给 变量 variable 赋值 。 
如 果 布 尔 表 达 式 boolean_expression 的 值 为 tue， 就 将 表达 式 true_value 的 值 赋 给 变量 
variable; 如 果 布 尔 表达 式 boolean_expression 的 值 为 false， 就 将 表达 式 false_value 的 值 赋 
给 变量 variable。 

在 以 下 赋值 语句 中 ， 

var iMax = (iNuml > iNum2) ? iNuml : iNum2; 
变量 iMax 将 被 赋予 变量 Numl 和 iNum2 中 的 较 大 值 ， 即 如 果 iNuml 大 于 iNum2， 布 尔 表 
达 式 iNuml>iNum2 的 值 为 tue， 则 将 iNuml 的 值 赋 给 变量 iMax; 但 如果 iNum2 大 于 或 等 
于 iNuml1， 布 尔 表达 式 iINum1>iNum2 的 值 为 false， 则 将 INum2 的 值 赋 给 变量 iMax。 

上 述 赋 值 语句 实际 上 等 价 于 如 下 if-else 语句 : 


if (iNuml>iNum2) iMax=iNuml; 





else iMax=iNum2; 


(i0% 全 局 变量 和 局 部 变量 


在 JavaScript 中 ， 变 量 可 以 分 为 全 局 变量 和 局 部 变量 。 在 函数 外 部 定义 的 变量 属于 全 
局 变量 ， 在 函数 内 部 定义 的 变量 以 及 函数 定义 中 的 形式 参数 属于 局 部 变量 。 全 局 变量 既 可 
以 在 函数 外 部 赋值 和 引用 ， 也 可 以 在 函数 内 部 赋值 和 引用 。 局 部 变量 只 能 在 函数 内 部 定 
义 、 赋 值 和 引用 ， 而 不 能 在 函数 外 部 赋值 和 引用 。 

【 例 10-6】 理解 全 局 变量 以 及 局 部 变量 。HIML 文档 主体 中 的 JavaScript 代码 如 下 : 


<script type="text/javascript"> 
Var V1=07 
document .write ("全 局 变量 v1 的 初始 值 : "+vl+"<br/>"); 


function fl() { 

Var v2=100; 

V1L=V1+17 

document .write ("局 部 变量 v2 的 值 : "+v2+"<br/>"); 
} 
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f1(); document .write ("第 1 次 函数 调用 后 ， 全 局 变量 v1 的 值 : "+vl+"<br/>"); 
f1(); document .write ("第 2 次 函数 调用 后 ， 全 局 变量 v1 的 值 : "+vl+"<br/>"); 


//document .write ("局 部 变量 v2 的 值 是 "+v2+"<br/>"); 此 条 语句 将 出 错 
</script> 


上 述 JavaScript 在 Web 浏览 器 中 的 输出 如 下 : 

全 局 变量 v1 的 初始 值 : 0 

局 部 变量 v2 的 值 : 100 

第 1 次 函数 调用 后 ， 全 局 变量 vl 的 值 : 1 

局 部 变量 v2 的 值 ，100 

第 2 次 函数 调用 后 ， 全 局 变量 v1 的 值 : 2 

注意 : 

@ 在 JavaScript 中 使 用 变量 时 ， 应 该 遵循 “首先 定义 ， 然 后 赋值 ， 最 后 引用 ”的 原则 ， 
也 就 是 首先 使 用 保留 字 var 对 变量 进行 定义 ， 然 后 使 用 赋值 运算 符 给 变量 赋值 ， 这 样 才 可 
以 在 之 后 的 程序 中 引用 变量 。 

@ 在 JavaScript 中 ， 也 可 以 在 定义 变量 的 同时 给 变量 赋值 ， 例 如 var v2=100。 

@ 避免 使 用 同名 的 全 局 变量 和 局 部 变量 。 

图 每 次 调用 函数 位 ， 都 会 使 全 局 变量 v] 的 值 加 1。 而 且 每 次 调用 函数 fl 之 后 ， 变 量 
V1 仍然 存在 。 因 此 ， 多 次 调用 函数 fl 能 够 使 全 局 变量 v1 的 值 连续 累加 1。 

@ 每 次 调用 函数 位， 都 将 重新 定义 局 部 变量 V2， 并 对 局 部 变量 V2 重新 赋值 100。 而 
且 每 次 调用 函数 和 之后， 局 部 变量 V2 就 不 再 存在 。 因 此 ， 不 能 在 函数 生 的 外 部 引用 局 部 
变量 v2。 


(0.5 类 型 转换 


在 JavaScript 中 ， 有 时 候 需 要 将 保存 在 某 些 变量 中 的 数据 转换 为 另 一 种 类 型 的 数据 。 
10.5.1 隐 式 类 型 转换 


在 JavaScript 表达 式 中 ， 如 果 boolean 或 number 类 型 的 变量 或 数据 与 string 类 型 的 变 
量 或 数据 之 间 有 运算 符 “+”， 该 运算 符 “+” 会 被 Web 浏览 器 解析 为 字符 串 连接 运算 
符 。 此 时 ， 表 达 式 中 boolean 或 number 类 型 的 数据 会 被 隐 式 地 转换 为 string 类 型 的 数据 ， 
然后 参与 字符 串 的 连接 运算 。 例 如 ， 


Var b=true,nl=100, n2=3.14; 





Var s="JavaScript "+b+" "+nl+" "+n2; 


其 中 表达 式 "JavaScript "+b+" "+nl+" "+n2 中 的 “+” 就 是 字符 串 连接 运算 符 。 执 行 第 2 
条 语句 后 ，string 类 型 变量 s 的 值 为 "JavaScript true 100 3.14"。 
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10.5.2” 显 式 类 型 转换 


与 隐 性 类 型 转换 相对 应 ，JavaScript 提供 预先 定义 的 方法 实现 显 式 类 型 转换 。 
在 JavaScript 中 ，boolean 或 number 类 型 的 变量 也 可 以 作为 一 个 对 象 ， 此 时 可 以 使 用 
这 些 对 象 的 toString 方法 将 其 中 的 数据 显 式 地 转换 为 字符 串 。 例 如 ， 


Var b=true,nl=100, n2=3.14; 
Var s="JavaScript "+b.tostring()+" "+nl.tostring()+" "+n2.tostring(); 


执行 第 2 条 语句 后 ，string 类 型 变量 s 的 值 为 "JavaScript true 100 3.14"。 
【 例 10-7】 将 boolean 或 number 类 型 的 数据 转换 为 字符 串 。HTML 文档 主体 中 的 
JavaScript 代码 如 下 : 


<script type="text/javascript"> 
Var b=true,nl=100, n2=3.14; 
Var s="Java "+b+" "+nl+" "+n2; 
document .write ("string 类 型 的 变量 s 的 值 是 : "+s+"<br/>"); 





s="JavaScript "+b.tostring()+" "+nl.tostring()+" "+n2.tostring(); 
document .write ("string 类 型 的 变量 s 的 值 是 : "+s+"<br/>"); 
</script> 


上 述 JavaScript 在 Web 浏览 器 中 的 输出 如 下 : 
string 类 型 的 变量 s 的 值 是 : Java true 100 3.14 
string 类 型 的 变量 s 的 值 是 : Javascript true 100 3.14 
在 JavaScript 中 ， 使 用 函数 parseInt 或 parseFloat 可 以 将 字符 串 显 式 地 转换 为 整数 或 浮 
点 数 。 
parseInt 函数 会 从 左 向 右 逐 个 字符 解析 整个 字符 串 ， 具 体 过 程 如 下 : 首先 分 析 第 1 个 
字符 ， 判 断 它 是 否 是 数字 字符 ， 如 果 第 1 个 字符 不 是 数字 字符 ， 该 函数 将 停止 解析 字符 
串 ， 并 返回 NaN， 表 示 “Nota Number”"; 如 果 第 1 个 字符 是 数字 字符 ， 该 函数 将 继续 逐个 
分 析 后 续 字 符 …… 这 一 过 程 将 持续 到 发 现 非 数 字 字 符 或 最 后 一 个 数字 字符 为 止 ， 此 时 该 函 
数 将 把 之 前 的 数字 字符 串 转换 成 相应 的 整数 。 
parseFloat 函数 和 parseInt 函数 的 工作 原理 类 似 。 
【 例 10-8】 将 字符 串 转 换 为 整数 或 浮 点 数 。HIML 文档 主体 中 的 JavaScript 代 码 如 下 : 
<script type="text/javascript"> 
Var sl="16",s2="] .6"; 
Var n=parseInt (sl1)+parseInt (s2); 
document .write ("nunber 类 型 变量 n 的 值 是 : "+n+"<br/>"); 


n=parseFloat (s1)+parseFloat (s2); 
document .write ("nunber 类 型 变量 n 的 值 是 : "+n+"<br/>"); 
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document .write ("parseInt 的 返回 值 是 : "+parseInt ("16px")+"<br/>"); 
document .write ("parseInt 的 返回 值 是 : "+parseInt ("sd16")+"<br/>"); 


sl="1.6.7"; 
document .write ("parseFloat (sl1) 的 返回 值 是 : "+parseFloat (s1)+"<br/>"); 
sl=".16sd"; 
document .write ("parseFloat (s1) 的 返回 值 是 : "+parseFloat (s1)+"<br/>"); 
sl="sdl .6"; 
document .write ("parseFloat (s1) 的 返回 值 是 : "+parseFloat (s1)+"<br/>"); 


document .write ("parseInt 的 返回 值 是 : "+parseInt ("016")+"<br/>"); 

document .write ("parseInt 的 返回 值 是 : "+parseInt ("0xA0")+"<br/>"); 

document .write ("parseInt 的 返回 值 是 : "+parseInt ("16", 8)+"<br/>"); 

document .write ("parseInt 的 返回 值 是 : "+parseInt ("A0",16)+"<br/>"); 

document .write ("parseInt 的 返回 值 是 : "+parseInt ("A0")+"<br/>"); 
</script> 


注意 : 

@ 如 果 字 符 串 的 第 1 个 字符 是 0，parseInt 函数 会 对 其 后 的 数字 字符 按照 八进制 进行 
解析 ， 并 将 有 效 的 数字 字符 转换 为 相应 的 十 进 制 整数 。 如 果 字 符 串 的 前 两 个 字符 是 0x 或 
0X，PparseInt 函数 则 对 其 后 的 数字 字符 按照 十 六 进 制 进行 解析 ， 并 将 有 效 的 数字 字符 转换 
为 相应 的 十 进 制 整数 。 例 如 ，parseInt("016") 的 返回 值 是 14， 而 parseInt("0xA0") 的 返回 值 
则 是 160。 

@ 调用 parseInt 函数 时 ， 也 可 以 使 用 第 2 个 参数 指定 某 个 进 制 ， 然 后 按照 该 进 制 对 第 
1 个 参数 中 的 字符 串 进行 解析 。 例 如 ，parseInt("16".8) 将 按照 入 进 制 解析 字符 串 "16"， 所 以 
返回 值 是 14; 而 parseInt("A0",16) 将 按照 十 六 进 制 解析 字符 囊 "A0"， 所 以 返回 值 是 160。 

图 调用 parseInt 函数 时 ， 如 果 没 有 使 用 第 2 个 参数 ， 则 parseInt 函数 将 按照 十 进 制 解 
析 字 符 串 。 例 如 ，parseInt("A0") 将 按照 十 进 制 解析 字符 囊 "A0"， 所 以 返回 值 是 NaN。 


ko JavaScript 中 的 流程 控制 语句 





与 C 和 Java 等 程序 设计 语言 类 似 ，JavaScript 支持 结构 化 程序 设计 不 仅 可 以 实现 
顺序 结构 (Sequential Structure) 、 选 择 结构 〈Selection Structure) 和 循环 结构 (Repetition 
Stmucture) 三 种 基本 的 程序 结构 ， 而 且 能 够 对 程序 流程 进行 选择 控制 和 循环 控制 。 


10.6.1 选择 控制 语句 


选择 结构 又 称 分 支 结构 ， 或 选取 结构 。 使 用 选择 结构 ， 能 够 在 不 同 条 件 下 执行 相应 
的 数据 处 理 任务 。 选 择 结构 又 可 进一步 分 为 单 分支 、 双 分 支 和 多 分 支 三 种 类 型 。 其 中 ， 单 
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分 支 和 双 分 支 选 择 结构 与 关系 运算 符 、 逻 辑 运算 符 以 及 布尔 表达 式 密 切 相关 。 

在 JavaScript 中 ， 单 分 支 、 双 分 支 和 多 分 支 三 种 类 型 的 选择 结构 分 别 使 用 让、 应 else 和 
switch 三 种 选择 控制 语句 实现 。 

使 用 让 语 句 可 以 实现 单 分 支 选 择 结 构 ， 站 语句 的 语法 格式 如 下 : 


if ( boolean-expression ) 

















statement | statement-block 


其 中 ， 布 尔 表达 式 boolean-expression 可 以 是 表示 简单 条 件 的 关系 表达 式 ， 也 可 以 是 表示 
复合 条 件 的 逻辑 表达 式 ， 用 于 控制 选择 结构 中 的 程序 流程 。statement 表示 一 条 语句 ， 
statement-block 表示 用 一 对 花 括 号 “{” 和 “}” 组 合 在 一 起 的 一 组 语句 。 这 对 花 括号 及 其 
中 的 语句 统称 语句 块 〈Statement Block) 。 

使 用 让 else 语句 可 以 实现 双 分 支 选择 结构 ，if-else 语句 的 语法 格式 如 下 : 


if ( boolean-expression ) 

















statement | statement-block 
else 
statement | statement-block 


使 用 switch 语句 可 以 实现 多 分 支 选择 结构 ，switch 语句 的 语法 格式 如 下 : 














Switch ( integral-expression ) { 
case integral-valuel: statement1:; 
break; 
case integral-value2: statement2; 
break; 


case integral-valuen: statementn; 
break; 
default: statement; 





其 中 ，integral-expression 可 以 是 保存 整数 的 变量 ， 也 可 以 是 运算 结果 为 整数 的 算术 表 
达 式 。statement1l 、statement2、……… 、statementn 和 statement 可 以 是 一 条 语句 ， 也 可 以 是 
一 个 语句 块 。 


10.6.2 ”循环 控制 语句 


在 JavaScript 中 ， 循 环 控制 语句 主要 有 三 种 ， 分 别 是 while、do-while 和 for 语句 。 
while 语句 的 语法 格式 如 下 : 


while ( boolean-expression ) 


statement | statement-block 


其 中 ， 布 尔 表 达 式 boolean-expression 可 以 是 表示 简单 条 件 的 关系 表达 式 ， 也 可 以 是 表示 
复合 条 件 的 逻辑 表达 式 ， 用 于 控制 循环 结构 中 的 程序 流程 ， 因 此 也 称 循 环 控制 条 件 。 
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statement 表示 一 条 语句 ，statement-block 表示 一 个 语句 块 。statement 或 statement-block 统 
称 为 循环 体 。 

while 语句 的 执行 过 程 如 下 : 在 每 次 循环 体 开始 之 前 判断 一 次 布尔 表达 式 
boolean expression。 如 果 布 尔 表达 式 boolean expression 的 值 为 tue， 就 会 反复 执行 循环 体 
中 的 语句 ;如 果 布 尔 表 达 式 boolean_expression 的 值 为 false， 就 会 终止 执行 while 语句 及 其 
循环 体 中 的 语句 ， 然 后 执行 while 语句 后 面 的 语句 。 

do-while 语句 的 语法 格式 如 下 : 

dof{ 

statements; 
} while ( boolean-expression ) 


其 中 ， 花 括号 及 其 中 的 语句 为 循环 体 ， 布 尔 表 达 式 boolean_expression 为 判断 是 否 再 
次 执行 循环 体 的 循环 控制 条 件 。 

do-while 语句 的 执行 过 程 如 下 : 在 每 次 循环 体 结束 之 后 判断 一 次 布尔 表达 式 
boolean_expression。 如 果 布 尔 表达 式 boolean_expression 的 值 为 tue， 就 会 再 次 执行 循环 体 
中 的 语句 ， 直 到 布尔 表达 式 boolean_expression 的 值 为 false， 才 会 终止 执行 do-while 语句 
及 其 循环 体 中 的 语句 ， 然 后 执行 do-while 语句 后 面 的 语句 。 

while 语句 和 do-while 语句 的 区 别 在 于 : while 语句 是 首先 判断 循环 控制 条 件 ， 然 后 再 
执行 循环 体 ， 如 果 第 1 次 循环 控制 条 件 就 不 成 立 ， 则 一 次 也 不 执行 循环 体 ，do-while 语句 
是 首先 执行 一 次 循环 体 ， 然 后 再 判断 循环 控制 条 件 ， 因 此 ， 至 少 执行 一 次 循环 体 。 

for 语句 的 语法 格式 如 下 : 

for ( ForInit; boolean-expression; ForUpdate ) 
statement | statement-block 


其 中 ，statement 表示 一 条 语句 ，statement-block 表示 一 个 语句 块 ， 两 者 统称 循环 体 。 布 尔 
表达 式 boolean_expression 为 判断 是 否 执行 循环 体 的 循环 控制 条 件 。 

for 语 名 的 执行 过 程 如 下 : 在 第 1 次 执行 循环 体 之 前 ， 首 先 执行 初始 化 语句 ForInit。 接 
着 测试 循环 控制 条 件 ， 如 果 循 环 控制 条 件 boolean-expression 成 立 ， 就 执行 循环 体 。 然 后 
执行 ForUpdate， 并 再 次 测试 循环 控制 条 件 ， 如 果 循 环 控制 条 件 boolean-expression 仍然 成 
立 ， 就 继续 执行 循环 体 ， 否 则 ， 终 止 执行 for 语 句 及 其 循环 体 中 的 语句 ， 然 后 执行 for 语句 














后 面 的 语句 。 
【 例 10-9】 for 语句 、 条 件 运算 符 和 求 余 运算 符 的 应 用 。HIML 文档 主体 中 的 
JavaScript 代码 如 下 : 


<script type="text/javascript"> 


var pictureIndex=0; 


for (Var i=1;i<=9;i++) { 
Var previousPictureIndex= (pictureIndex==0) ?3: (pictureIndex-1); 
document .write ("第 "+i+" 次 循环 : "+"pictureIndex="+pictureIndex+ 
",previousPictureIndex="+previousPictureIndex+"<br/>"); 


pictureIndex= (pictureIndex+1)%4; 
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} 

</script> 

以 上 JavaScript 代 码 实现 了 一 个 for 循 环 :第 1 次 循环 时 ， 变 量 pictureIndex 的 值 是 0， 
经 过 条 件 运算 ， 变 量 previousPictureIndex 的 值 变 为 3， 然 后 变量 pictureIndex 的 值 变 为 1; 
第 2 次 循环 时 ， 变 量 pictureIndex 的 值 是 1， 经 过 条 件 运算 ， 变 量 previousPictureIndex 的 值 
变 为 0， 然后 变量 pictureIndex 的 值 变 为 2…… 第 4 次 循环 时 ， 变 量 pictureIndex 的 值 是 3， 
经 过 条 件 运 算 ， 变 量 previousPictureIndex 的 值 变 为 2， 然 后 变量 pictureIndex 的 值 变 为 0; 
这 样 ， 第 5 次 循环 时 又 会 出 现 第 1 次 循环 时 的 情况 一 一 变量 pictureIndex 的 值 是 0， 经 过 条 
件 运算 ， 变 量 previousPictureIndex 的 值 变 为 3， 然 后 变量 pictureIndex 的 值 变 为 1…… 如 此 
反复 ， 变 量 pictureIndex 的 值 始终 依次 在 0、1、2 和 3 之 间 循 环 切换 ， 而 变量 
previousPictureIndex 的 值 则 相应 地 始终 依次 在 3、0、1 和 2 之 间 循 环 切换 。 

以 上 JavaScript 代码 的 执行 结果 如 下 : 

第 1 次 循环 : pictureIndex=0,previousPictureIndex=3 

第 2 次 循环 : pictureIndex=1,previousPictureIndex=0 

第 3 次 循环 : pictureIndex=2,previousPictureIndex=1 

第 4 次 循环 : pictureIndex=3,previousPictureIndex=2 

第 5 次 循环 : pictureIndex=0,previousPictureIndex=3 

第 6 次 循环 : pictureIndex=1,previousPictureIndex=0 

第 7 次 循环 : pictureIndex=2,previousPictureIndex=1 

第 8 次 循环 : pictureIndex=3,previousPictureIndex=2 

第 9 次 循环 : pictureIndex=0,previousPictureIndex=3 


JavaScript 是 一 种 轻 量 级 的 编程 语言 ， 具 有 短小 精 悍 的 特点 ， 并 使 Web 浏览 器 及 客户 
机 端 具 备 了 运行 程序 的 能 力 。 

JavaScript 的 运行 离 不 开 Web 浏览 器 。 换 言 之 ，JavaScript 不 能 脱离 Web 浏览 器 而 独立 
运行 。 因 此 ，Web 浏览 器 也 被 称 为 JavaScript 的 宿主 环境 (Host Environment) 。 

目前 ， 任 何 一 款 版 本 较 高 的 Web 浏览 器 都 带 有 JavaScript 解释 器 。 在 每 次 运行 
JavaScript 之 前 ， 都 需要 通过 解释 器 将 JavaScript 翻译 为 计算 机 能 够 执行 的 机 器 代码 。 

JavaScript 可 以 出 现在 HTML 文档 的 主体 或 头 部 ， 但 更 多 的 是 以 JavaScript 函数 的 形式 
单独 保存 在 外 部 脚本 文档 中 。 

出 现在 HIML 文档 主体 或 头 部 的 JavaScript 必须 放 在 script 元 素 内 ， 若 将 JavaScript 
保存 在 外 部 脚本 文档 中 ， 则 不 能 使 用 script 元 素 。 

出 现在 HTML 文档 头 部 和 外 部 脚本 文档 中 的 JavaScript 通常 放 在 JavaScript 函数 中 ， 
然后 在 HIML 文档 主体 调用 JavaScript 函数 。 

定义 在 HIML 文档 头 部 的 JavaScript 函数 只 能 在 同一 HIML 文档 中 被 调用 。 定 义 在 外 
部 脚本 文档 中 的 JavaScript 函数 则 可 以 在 多 个 HIML 文档 中 被 调用 。 换 言 之 ， 在 不 同 
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HTML 文档 中 可 以 调用 在 同一 个 外 部 脚本 文档 中 定义 的 JavaScript 函数 。 

在 HTML 文档 头 部 使 用 script 元 素 及 其 src 属性 ， 可 以 指向 定义 有 JavaScript 函数 的 外 
部 脚本 文档 。 这 样 ， 在 Web 浏览 器 加 载 HTML 文档 的 同时 ， 也 将 加 载 外 部 脚本 文档 中 的 
JavaScript 函数 及 其 中 的 语句 。 

JavaScript 是 一 种 弱 类 型 语言 。 在 JavaScript 中 使 用 保留 字 var 定义 变量 时 ， 无 须 指明 
变量 的 类 型 。 

在 函数 外 部 定义 的 变量 属于 全 局 变量 ， 在 函数 内 部 定义 的 变量 以 及 函数 定义 中 的 形 
式 参数 属于 局 部 变量 。 全 局 变量 既 可 以 在 函数 外 部 赋值 和 引用 ， 也 可 以 在 函数 内 部 赋值 和 
引用 。 局 部 变量 只 能 在 函数 内 部 定义 、 赋 值 和 引用 ， 而 不 能 在 函数 外 部 赋值 和 引用 。 

使 用 字符 串 连接 运算 符 “+”， 可 以 隐 式 地 将 boolean 或 number 类 型 的 数据 转换 为 
string 类 型 的 数据 。 在 JavaScript 中 ，boolean 或 number 类 型 的 变量 也 可 以 作为 一 个 对 象 ， 
此 时 可 以 使 用 这 些 对 象 的 toString 方法 将 其 中 的 数据 显 式 地 转换 为 字符 串 。 使 用 parseInt 
或 parseFloat 函数 可 以 将 字符 串 显 式 地 转换 为 整数 或 浮 点 数 。 

在 JavaScript 中 ， 使 用 函数 parseInt 或 parseFloat 可 以 将 字符 串 显 式 地 转换 为 整数 或 浮 
点 数 。 

JavaScript 支持 结构 化 程序 设计 。 在 JavaScript 中 ， 使 用 过 、if-else 和 switch 语句 可 以 
分 别 实现 单 分 支 、 双 分 支 和 多 分 支 选 择 结构 。 使 用 while、do-while 和 for 语句 可 以 实现 循 


环 结构 
a 


.编写 JavaScript 代码 ， 验 证 表 10-1 中 算术 表达 式 的 值 。 

.编写 JavaScript 代码 ， 验 证 表 10-2 中 关系 表达 式 的 值 。 

.编写 JavaScript 代码 ， 验 证 表 10-3 中 逻辑 表达 式 的 值 。 

.编写 JavaScript 代码 ， 验 证 表 10-4 中 变量 x 的 值 。 

.通过 编程 观察 以 下 JavaScript 在 Web 浏览 器 中 的 输出 ， 然 后 分 析 每 个 “+” 是 算术 
运算 符 、 还 是 字符 串 连接 运算 符 ? 


Var x=12, y=5; 


























DD 一 


document .write (x+y+"<br/>"); 
document .write ("x="+x+y+"<br/>"); 


如 果 想 要 在 Web 浏览 器 中 输出 “x=17”， 应 该 如 何 改写 最 后 一 条 语句 ? 

6. 如 图 10-2 所 示 ，【 例 10-1】、【 例 10-2】 和 【 例 10-3】 在 Web 浏览 器 输出 的 乘法 
表 中 ， 虚 线 内 的 上 下 等 式 还 需 靠 左 对 齐 。 为 此 ， 可 以 在 输出 每 个 等 式 后 对 其 中 的 乘积 进行 判 
断 ， 当 乘积 小 于 10 时 可 以 多 输出 一 个 空格 。 为 此 ， 改 写 【 例 10-3 中 函数 printMultiplicationTable 
的 代码 ， 使 乘法 表 中 的 所 有 上 下 等 式 均 靠 左 对 齐 。 

提示 : 在 HTML 文档 及 网 页 中 ， 无 间断 空格 使 用 实体 名 称 “&nbsp;” 或 实体 编号 
“&#160;” 替 代 。 
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JavaScript 支持 结构 化 程序 设计 ， 同 时 也 是 一 种 基于 对 象 的 脚本 语言 。JavaScript 预先 
创建 了 一 些 内 置 对 象 (Built-in Objects) ， 常 用 的 内 置 对 象 包 括 数 组 〈Array) 、 布 尔 
(Boolean) 、 日 期 和 时 间 (Date) 、 函 数 (Function) 、 数 学 (Math) 、 数 值 (Number) 、 
对 象 《Object) 、 正 则 表达 式 (RegExp) 和 字符 串 〈String) 等 。 在 每 个 内 置 对 象 中 又 预先 
定义 了 相应 的 属性 (Property) 和 方法 (Method) 。 以 下 主要 介绍 Date 对 象 、String 对 象 、 
RegExp 对 象 、Array 对 象 和 Math 对 象 及 其 应 用 。 


(4 对 象 、 属 性 和 方法 


和 Java、C++ 和 C# 等 面向 对 象 的 程序 设计 语言 类 似 ， 在 JavaScript 中 ， 对 象 (Object) 
也 拥有 属性 和 方法 。 属 性 描述 了 对 象 的 一 些 基本 特征 ， 而 方法 则 是 能 够 通过 对 象 执 行 的 
操作 。 

访问 对 象 属性 的 基本 语法 是 : 

objectName .propertyName 

通过 对 象 调用 方法 的 基本 语法 是 : 


objectName .methodName 


(12 Date 对 象 


在 JavaScript 中 ， 通 过 Date 对 象 可 以 调用 表 11-1 中 的 方法 处 理 日 期 和 时 间 。 
表 11-1 Date 对 象 的 常用 方法 














作用 及 返回 什 
getFullYear 返回 以 四 位 数字 表示 的 年 份 

getMonth | 返回 月 份 《0~11)。0 表示 1 月 ，1 表示 2 月 ， 以 此 类 推 ，11 表示 12 月 

getDate | 返回 一 个 月 中 的 某 一 天 (1~31) 

getDay | 返回 一 周 中 的 某 一 天 〈0~6)。0 表示 星期 日 ，1 表示 星期 一 ， 以 此 类 推 ，6 表示 星期 六 





getHours 返回 小 时 
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方 法 作用 及 返回 值 
ed 返回 分 名 
i | 返回 黎 
setDate | 设置 Date 对 象 中 月 的 某 一 天 (1~31) 





toLocaleString 将 时 间 / 时 间 转 换 为 当地 格式 的 字符 串 ， 如 "2013 年 3 月 18 日 星期 一 07:38:36" 











【 例 11-1】 在 JavaScript 中 创建 Date 对象， 并 使 用 和 验证 Date 对 象 的 常用 方法 。HIML 
文档 主体 中 的 JavaScript 代码 如 下 : 


<script type="text/javascript"> 
// 可 以 使 用 new 运算 符 和 以 下 多 种 构造 函数 创建 Date 对 象 


Var 











today=new Date () 7 // 获 取 系 统 的 当前 日 期 和 时 间 


//var today= new Date ("November 11,2012"); 

//var today= new Date ("November 11,2012 11:22:33"); 

//var today= new Date ("11 November 2012"); 

//var today= new Date(2012,10,11,22,33,44); // 第 2 个 参数 10 表 示 11 月 
//var today= new Date(2012,10,11); // 第 2 个 参数 10 表示 11 月 
document .write ("变量 today 的 类 型 为 "+ (typeof today)+"<br/>"); 


Var 
var 
var 
Var 
Var 


iYear=today.getFullYear () 7 


iMonth=today.getMonth ()+1; // 月 份 是 从 0 开始 的 
iDate=today.getDate () 7 

iDay=today.getDay (); // 周 几 是 从 0 开始 的 ，0 代表 周 日 
sDay=""; 


switch(iDay) { 
case 0: ”spDay=" 星 期 日 "; break; 






case 1 break; 
case 2 2 break; 
case 3: Ls break; 
case 4 期 四 "; break; 
case 5 break; 
case 6: break; 


default: sDay="error"; 





document .Write ("今天 是 "+iYear+" 年 "+iMonth+" 月 "+iDate+" 日 "+", "+sDay+"<br/>"); 


today.setDate (today.getDate()+5); 
document .write ("5 天 以 后 是 : "+today.toLocalestring()); 


</script> 


注意 : 


@ 需要 使 用 new 运算 符 、 并 调用 Date 构造 函数 才能 创建 Date 对 象 。 
@) 在 以 上 代码 中 ， 变 量 today 用 于 指 代 一 个 Date 对 象 ， 属 于 object 类 型 。 
图 代码 Date(2012,10,11,22,33,44) 和 Date(2012,10,11) 中 ， 第 2 个 参数 10 表示 
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(13 String 对 象 


在 JavaScript 中 ， 使 用 String 对 象 可 以 存储 和 处 理 字符 串 。 





过 


11.3.1 创建 String 对 象 











与 创建 Date 对 象 类 似 ， 需 要 使 用 new 运算 符 、 并 调用 String 构造 函数 才能 创建 String 
对 象 。 例 如 ， 

var idno=new String("51101219641111441X") ; // 变 量 idno 用 于 存储 身份 证 号 码 

在 以 上 代码 中 ， 首 先 使 用 new 运算 符 、 并 调用 String 构造 函数 创建 一 个 String 对 象 。 
然后 通过 赋值 运算 符 ， 使 变量 idno 指 代 该 String 对 象 。 因 此 ， 变 量 idno 属于 object 类 型 。 




















11.3.2 String 对 象 的 属性 


每 个 String 对 象 都 拥有 属性 length， 该 属性 表示 字符 串 的 长 度 ， 即 字符 串 中 的 字符 个 
数 。 在 JavaScript 中 ， 可 以 按照 “String 对 象 名 .length” 的 格式 访问 一 个 字符 串 的 长 度 。 例 
如 ，idno.length 就 表示 字符 串 idno 的 长 度 ， 即 字符 串 中 的 字符 个 数 。 

以 下 JavaScript 可 以 判断 字符 串 idno 中 是 否 包含 18 个 字符 。 

if (idno.length!=18) 

document .write ("身份 证 号 码 不 是 18 位 ! "); 

elsel{ 





} 
11.3.3 ”String 对 象 的 方法 


通过 String 对 象 ， 可 以 调用 表 11-2 中 的 方法 处 理 其 所 存储 的 字符 串 。 
表 11-2 String 对 象 的 常用 方法 
方 法 作用 及 返回 值 应 用 举例 








从 fromindex 指定 的 位 置 开始 ， 

检索 子囊 substring 在 字符 串 中 | var emai="a@b.cd" 

首次 出 现 的 位 置 。 如 果 要 检索 的 | var atposl=emailindexOf"@") 
indexOfsubstring.fomindex) | 子 串 substring 在 字符 串 中 没有 | var atpos2=emailindexOft"@",2) 

出 现 ， 则 返回 -1 。 如 果 省 略 | 执行 上 述 JavaSceript 代码 后 , atposl 的 值 是 1， 

fiomindex, 则 从 字符 串 的 首 字符 | atpos2 的 值 是 -1 

开始 检索 子 串 substring 
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作用 及 返回 值 
返回 子 串 substring 在 字符 串 中 
最 后 出 现 的 位 置 。 如 果 要 检索 的 
子 串 substring 在 字符 串 中 没有 
出 现 ， 则 返回 -1 


续 表 
应 用 举例 
var email="a(@b.cd" 
Var dotpos=email lastIndexOf(".") 
执行 上 述 JavaScript 代码 后 ，dotpos 的 值 是 3 





search(substring) 


substr(start,length) 


substring(start,end) 


split(separator) 


注意 : 





在 字符 串 中 , 检索 指定 的 或 与 正 
则 表达 式 相 匹配 的 子 串 
substring， 并 返回 子 串 substring 
在 字符 串 中 首次 出 现 的 位 置 。 如 
果 要 检索 的 子 串 substring 在 字 
符 串 中 没有 出 现 ， 则 返回 -1 


在 字符 串 中 ， 从 起 始 位 置 start 
开始 提取 指定 长 度 length 的 子 


串 


在 字符 串 中 , 从 起 始 位 置 (start) 
开始 、 到 终止 位 置 (end-1) 截 
止 提取 子 串 


以 separator 为 分 隔 符 , 将 字符 串 
分 割 为 若干 子 串 , 再 将 这 些 子 串 
FE 为 元 素 组 织 在 一 个 数组 中 , 最 
后 返回 该 数组 








var s="Hello world!" 
document.write(s.search("Hello")) /显示 0 
document.write(s.search("world")) /显示 6 
document.write(s.search("World")) /显示 -1 


var idno="51101219641111441X" 

var birthday Year=idno.substr(6,4) 

执行 上 述 JavaScript 代码 后 ，birthdayYear 的 
值 是 "1964" 

var idno="51101219641111441X" 

var birthday Year=idno.substring(6,10) 

执行 上 述 JavaScript 代码 后 ，birthdayYear 的 
值 是 "1964" 

var monthString="East: West:South:North"; 

var arrayOfStrings=monthString.split(™:"); 

执行 上 述 JavaScript 代码 后 , arayOfStrings 的 
值 是 数组 ["East","West","South","North"] 


@ 第 1 个 字符 在 整个 字符 串 中 的 位 置 为 0， 第 2 个 字符 在 字符 串 中 的 位 置 为 1，…… 
第 mn 个 字符 在 字符 串 中 的 位 置 为 n-1。 
@) 如 果 没 有 特别 说 明 ， 检 索 或 匹配 的 字符 串 是 区 分 字母 大 小 写 的 。 


11.3.4 ”String 对 象 和 string 类 型 的 变量 


在 JavaScript 中 ，String 对 象 和 string 类 型 的 变量 都 可 以 用 于 存储 和 处 理 字符 串 。 





但 是 ，String 对 象 是 使 用 new 运算 符 、 并 调用 String 构造 函数 创建 的 ，String 对 象 拥有 
length 属 性 ， 并 且 可 以 直接 调用 在 String 对 象 中 预先 定义 的 方法 。 而 string 类 型 的 变量 则 属 


于 string 基本 类 型 。 


在 JavaScript 中 ，string 类 型 的 变量 可 以 转换 为 String 对 象 ， 同 样 拥有 length 属性 ， 同 
样 可 以 调用 在 String 对 象 中 预先 定义 的 方法 。 
【 例 11-2】 String 对 象 和 string 类 型 的 变量 。HTML 文档 主体 中 的 JavaScript 代码 


如 下 : 


<script> 


Var idnol=new String("51101219641111441X"); 





//18 个 字符 


document .write ("变量 idnol 的 类 型 为 "+ (typeof idnol)+"<br/>") 7 
document .write ("idnol.length="+idnol.length+"<br/>"); 
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document .write ("idnol .substring (6,10)="+idnol.substring(6,10)+"<br/>"); 


var idno2="51101219641111441"; ji 个 字符 
document .write ("变量 idno2 的 类 型 为 "+ (typeof idno2)+"<br/>") 
document .write ("idno2.length="+idno2.length+"<br/>"); 
document .write ("idno2.substring (6,10)="+idno2.substring(6,10)+"<br/>"); 
</script> 
在 以 上 代码 中 ，idnol 是 指 代 String 对 象 的 变量 ， 属 于 object 类 型 ， 拥 有 1length 属性 ， 
[以 直接 调用 substring 方法 。idno2 则 是 string 类 型 的 变量 ， 但 可 以 当 作 String 对 象 使 用 ， 
本 以 拥有 length 属性 ， 也 可 以 调用 substring 方法 。 
实际 上 ， 在 JavaScript 中 经 常 使 用 string 类 型 的 变量 存储 字符 串 ， 并 通过 string 类 型 的 
变量 调用 在 String 对 象 中 预先 定义 的 方法 ， 同 样 可 以 完成 字符 串 处 理 任务 。 


11.3.5 _ String 对 象 的 应 用 





| 























在 计算 机 程序 中 ， 有 时 需要 对 具有 特定 规律 或 格式 的 字符 串 数据 进行 验证 或 处 理 。 
例如 ， 在 电子 邮箱 字符 串 中 ， 必 须 包 含 at 符号 (@) ， 并 且 at 符号 (@) 不 能 是 首 个 字符 。 
此 外 ，at 符号 (@) 之 后 至 少 间 隔 一 个 字符 应 该 有 一 个 句号 (.) 。 

【 例 11-3】 应 用 String 对 象 的 indexOf 和 lastmdexOf 方法 验证 电子 邮箱 字符 串 的 格式 
有 效 性 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 


<script type="text/javascript"> 
Var email="a@b.cd"; 
//var email="ab.cd" 
//var email="Q@ab.cd" 
//var email="a@bcd" 
atpos=email .indexof ("@") // 第 1 个 at 符号 (@) 在 字符 串 email 中 的 位 置 
dotpos=email.lastIndexOf (".") // 最 后 一 个 句号 ( .) 在 字符 串 email 中 的 位 置 
document .write (email+"gnbsp; "+"atpos:"+atpos+"g&nbsp;"+"dotpos:"+dotpos) 





if (atpos<11ldotpos-atpos<2) alert ("电子 邮箱 无 效 ! ") 
else alert ("电子 邮箱 有 效 ! ") 
</script> 
注意 : 
GD 在 上 述 JavaScript 中 ，alert 是 JavaScript 提供 的 警告 框 函 数 。 执 行 该 函数 时 ， 会 弹 
出 一 个 警告 框 ， 并 依据 该 函数 的 参数 向 用 户 显 示 一 些 信息 ， 用 户 只 有 单 击 其 中 的 “确定 ” 
按钮 才能 继续 执行 后 面 的 JavaScript。 
@) 在 上 述 JavaScript 中 ， 如 果 布 尔 表 达 式 atpos<1 的 值 为 tue， 则 表示 字符 串 中 或 者 
不 包含 at 符号 (@) ， 或 者 at 符号 (@) 是 首 个 字符 ; 如 果 布 尔 表 达 式 dotpos-atpos<2 的 
值 为 tue， 则 表示 字符 串 不 符合 规则 “at 符号 (@) 之 后 至 少 间隔 一 个 字符 应 该 有 一 个 名 
号 (.)”。 因 此 ， 如 果 整 个 布尔 表达 式 atpos<llldotpos-atpos<2 的 值 为 tue， 则 表示 “电子 
邮箱 无 效 ”。 


Web 标准 网 页 设计 原理 与 前 端 开发 技术 


【 例 11-4】 定义 JavaScript 函数 validateEmail， 该 函数 按照 以 下 三 条 规则 验证 电子 邮 
箱 字 符 串 的 格式 有 效 性 : 

(1) 字符 串 中 必须 包含 at 符号 (@) 。 

(2) 在 字符 串 中 ，at 符号 (@) 不 能 是 首 个 字符 。 

(3) at 符号 〈@) 之 后 至 少 间隔 一 个 字符 应 该 有 一 个 句号 〈.) 。 

此 外 ， 对 于 函数 validateEmail 及 其 功能 还 有 以 下 一 些 要 求 : 

(1) 函数 定义 中 的 形式 参数 名 使 用 s_email， 表 示 一 个 电子 邮箱 字符 串 。 

(2) 如 果 字 符 串 s_email 符合 上 述 三 条 规则 ， 函 数 的 返回 值 为 tue， 表 示 电 子 邮 箱 字 
符 串 的 格式 有 效 。 和 否则 ， 函 数 的 返回 值 为 false， 表 示 电 子 邮 箱 字符 串 的 格式 无 效 。 

然后 ， 用 字符 串 数据 a@b.cd、ab.cd、@ab.cd 和 a@bcd 测试 函数 validateEmail， 以 验 
证 该 函数 及 其 返回 值 的 正确 性 。 

XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 应 用 String 对 象 及 其 方法 验证 电子 邮箱 字符 串 的 格式 有 效 性 </title> 
<script type="text/javascript"> 
// 定 义 验证 电子 邮箱 字符 申 格式 有 效 性 的 函数 valiqdateEmail 
function validateEmail(s email) { 
var reVal=true // 假 设 电 子 邮 箱 字符 串 格 式 有 效 
Var atpos=s email.indexof ("@") 
Var dotpos=s_email.lastIndexOf (".") 


if (atpos<111dotpos-atpos<2) reVal=false 


return reVal 
} 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
var email="a@b.cd" 
//var email="ab.cd" 
//var email="@ab.cd" 
//var email="a@bcd" 
//var email="a#c (@ (b.cd" 
document .write ("电子 邮箱 "+emai1) 


if (validateEmail (email)) document .write ("通过 验证 ! ") 
else document .write ("没有 通过 验证 ! ") 
</script> 
</body> 
</html> 
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注意 ; 由 于 函数 validateEmail 返回 布尔 值 true 或 false， 因 此 表达 式 validateEmail 
(email) 可 以 构成 让 语 句 中 的 条 件 。 


11.3.6 ”正则 表达 式 及 其 应 用 





除 电 子 邮 箱 字符 串 外 ， 其 他 一 些 特殊 用 途 的 字符 串 数据 同样 要 求 具有 共同 的 特征 或 
格式 。 例 如 ， 中 国 大 陆 的 邮政 编码 是 6 个 连续 的 数字 字符 。 又 如 ， 手 机 号 码 是 11 个 连续 的 
数字 字符 ， 并 且 第 一 个 数字 字符 是 1。 再 如 ， 身 份 证 号 码 包 括 18 个 字符 ， 并 且 前 17 个 字 
符 是 数字 字符 ， 最 后 1 个 字符 是 数字 字符 或 大 写字 母 X。 

在 Java、JavaScript 和 PHP 等 很 多 编程 语言 中 ， 可 以 使 用 正则 表达 式 (Regular 
Expression ) 描 述 这 些 特殊 用 途 的 字符 串 数 据 所 共同 具有 的 特征 或 格式 ， 并 将 正则 表达 式 用 
于 模式 匹配 (Patterm Matching) 在 给 定 的 字符 序列 中 查找 具有 指定 特征 的 子 序列 。 

如 表 11-3 所 示 ， 在 JavaScript 的 正则 表达 式 中 ， 需 要 使 用 一 些 特殊 的 字符 或 字符 组 合 
来 表示 字符 集合 (Character Sets) 、 量 词 (Quantifiers) 、 边 界 〈(Boundaries) 和 字符 类 别 
(Character Classes) 等 特定 的 含义 。 


表 11-3 ”正则 表达 式 中 的 特殊 字符 或 字符 组 合 及 其 含义 






























字符 或 字符 组 合 分 类 | 举 ” 例 含义 
[abc] 左右 方 括号 之 间 的 任意 单个 字符 ， 如 a、b 和 
['abc] 不 在 左右 方 括号 之 上 
EA [0-9] 从 0~9 的 任何 数字 字符 
A [本 从 小 写 a 到 小 写 z 的 任何 字符 
[A-Z] 从 大 写 A 到 大 写 Z 的 任何 字符 
[0-9[X] 从 0~9 的 任何 数字 字符 ， 或 大 写字 母 X 
s? 零 个 或 一 个 s 
S* 零 个 或 多 个 s 
量词 st 一 个 或 多 个 s 
站 s{n} s 正好 出 现 n 次 
s{n,} s 至 少 出 现 n 次 
s{nm} s 出现 n 至 m 次 
、 一 行 字符 串 的 开始 
a $ 一 行 字符 串 的 结尾 
. (句号) ”| x ( 回 车 ) 和 m (换行 ) 除外 的 任意 字符 
字符 类 别 d 数字 字符 ， 等 价 于 [0-9] 
i 单词 字符 (数字 字符 、 大 写字 母 、 下 面 线 和 小 写字 母 )， 等 价 于 
[0-9A-Z a-z] 





正则 表达 式 的 字面 值 (Literals) 总 是 以 斜 本 〈/) 开头 和 结尾 。 例 如 ， 正 则 表达 式 
/[0-9]{6}/ 或 者 Ad{6HM 表示 6 个 连续 的 数字 字符 。 又 如 ， 正 则 表达 式 /1[0-9]{10}/ 或 者 
/1\d{10}/ 表示 11 个 连续 的 数字 字符 ， 并 且 第 一 个 数字 字符 是 1。 再 如 ， 正 则 表达 式 
Ad{17}[dX]/ 表示 18 个 字符 ， 并 且 前 17 个 字符 是 数字 字符 ， 最 后 1 个 字符 是 数字 字符 或 
大 写字 母 X， 因 此 ， 该 正则 表达 式 描述 了 身份 证 号 码 必 须 具 有 的 特征 或 格式 。 
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应 


有 效 性 。 





【 例 11-S】 正则 表达 式 和 String 对 象 的 search 方法 的 应 用 


有 效 性 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 


<script type="text/javascript"> 





正则 表达 式 和 String 对 象 的 search 方法 ， 可 以 方便 地 验证 某 些 字符 串 数据 的 格式 


验证 身份 证 号 码 的 格式 





var idnol=new String("51101219641111441X")  //18 个 字符 


var flag=idnol.search(/\df17} [\dx]/) 
document .write ("身份 证 号 码 :"+idnol+"&nbsp;flag: 


"+flag+"<br/>") 


var idno2=new String("51101229641111441X3") //19 个 字符 


flag=idno2.search(/\d{17}[\dx]/) 
document .write ("身份 证 号 码 :"+idno2+"&nbsp; flag: 


"+flag+"<br/>") 


var idno3=new String ("A51101229641111441X") //19 个 字符 


flag=idno3.search(/\d{17}[\dx]/) 
document .write ("身份 证 号 码 :"+idno3+"&nbsp;flag: 


var idno4="51101219641111441A" //18 个 字符 
flag=idno4.search(/\d{17} [\dx]/) 
document .write ("身份 证 号 码 :"+idno4+"&gnbsp;flag: 


var idno5="511012196A41111441" //18 个 字符 
flag=idno5.search(/\d{17} [\dx]/) 
document .write ("身份 证 号 码 :"+idno5+"&nbsp;flag: 


var idno6="51101219641111144" ”//17 个 字符 

flag=idno6.search(/\d{17} [\dx]/) 

document .write ("身份 证 号 码 :"+idno6+"&nbsp;flag: 
</script> 


注意 : 








"+flag+"<br/>") 


“ELIagt™"<br/>")} 


"flagt"<br/>") 


"+flag+"<br/>") 


@ 在 以 上 JavaScript 中 ，String 对 象 idnol 和 idno2 中 的 前 18 个 字符 均 满足 正则 表达 
式 \d{17}[\dX]/ 所 描述 的 格式 要 求 ， 所 以 flag 的 值 均 为 0。 但 String 对 象 idno2 包含 19 个 


字符 ， 因 此 并 不 是 有 效 的 身份 证 号 码 。 


@ 在 String 对 象 idno3 中 ， 从 第 2 个 字符 开始 、 连 续 的 18 个 字符 满足 正则 表达 式 
Ad{f17}[\dX]/ 所 描述 的 格式 要 求 ， 所 以 flag 的 值 为 1。 但 由 于 String 对 象 idno3 中 的 第 1 
个 字符 是 A、 并 且 String 对 象 idno3 包含 19 个 字符 ， 因 此 也 不 是 有 效 的 身份 证 号 码 。 

图 虽然 String 对 象 idno4 和 idno5 均 只 有 18 个 字符 ， 但 均 不 满足 正则 表达 式 


Ad{17}[dX]/ 所 描述 的 格式 要 求 ， 所 以 flag 的 值 均 为 -1。 


@ String 对 象 idno6 只 有 17 个 字符 ， 因 此 不 满足 正则 表达 式 Ad{17}[\dX]/ 所 描述 的 


格式 要 求 ， 所 以 flag 的 值 也 为 -1。 


综 上 所 述 ， 当 flag 的 值 不 等 于 0 或 者 字符 串 的 长 度 〈 即 字符 个 数 ) 不 等 于 18 时 ， 字 
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符 串 数据 就 不 是 有 效 的 身份 证 号 码 。 换 言 之 ， 只 有 当 flag 的 值 等 于 0， 并 且 字 符 串 的 长 度 
〈 即 字符 个 数 ) 等 于 18 时 ， 字 符 串 数据 才 有 可 能 是 有 效 的 身份 证 号 码 。 

【 例 11-6】 定义 JavaScript 函数 validateIdno， 该 函数 按照 以 下 三 条 规则 验证 身份 证 号 
码 的 格式 有 效 性 : 

(1) 身份 证 号 码 必须 且 只 能 包括 18 个 字符 。 

(2) 前 17 个 字符 是 数字 字符 。 

(3) 最 后 1 个 字符 是 数字 字符 或 大 写字 母 X。 

此 外 ， 对 于 函数 validateIdno 及 其 功能 还 有 以 下 一 些 要 求 : 

(1) 函数 定义 中 的 形式 参数 名 使 用 s_idno， 表 示 一 个 身份 证 号 码 字 符 串 。 

(2) 如 果 字 符 串 s_ idno 符合 上 述 三 条 规则 ， 函 数 的 返回 值 为 tue， 表 示 满 足 身份 证 号 
码 的 基本 格式 要 求 ， 和 否则 ， 函 数 的 返回 值 为 false， 表 示 不 满足 身份 证 号 码 的 基本 格式 要 

根据 以 上 对 函数 validateIdno 的 要 求 ， 可 以 画 出 相应 的 程序 流程 图 ， 如 图 11-1 所 示 。 


reval<=false， 假 设 身 份 证 号 码 格式 无 效 | 























flag<=s idno.search(\d{17}NdX]/) 
(flas 一 0)&&(s idnolength 一 18) 


条 件 成 立 






条 件 不 成 立 


图 11-1 验证 身份 证 号 码 格式 有 效 性 的 程序 流程 图 


根据 图 11-1 中 的 程序 流程 图 ， 可 以 在 HIML 文档 头 部 定义 函数 validateIdno， 
JavaScript 代码 如 下 : 


<script type="text/javascript"> 
// 定 义 验 证 身份 证 号 码 格式 有 效 性 的 函数 validateIdno 
function validateIdno(s idno) { 
var reVal=false // 假 设 身 份 证 号 码 格式 无 效 
var flag=s idno.search(/\d{17} [\dx]/) 


if (flag==0&&s idno.length==18) reVal=true 
return reVal 
} 
</script> 
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然后 ， 用 【 例 11-5】 中 的 字符 串 数据 测试 函数 validateIdno， 以 验证 该 函数 及 其 
JavaScript 代码 的 正确 性 。 可 以 在 HTML 文档 主体 使 用 如 下 JavaScript 代码 : 


<script type="text/javascript"> 

var idno="51101219641111441X" //18 个 字符 
//var idno="51101229641111441X3" //19 个 字符 
//var idno="A51101229641111441X" //19 个 字符 
//var idno="51101219641111441A"  ”///18 个 字符 
//var idno="511012196A41111441"  ”//18 个 字符 
//var idno="51101219641111144" ”//17 个 字符 
document .write ("身份 证 号 码 "+idno) 





if (validateIdno (idno)) document .write(" 通过 验证 ! ") 
else document .write(" 没有 通过 验证 ! ") 
</script> 


注意 : 由 于 函数 validateIdno 返回 布尔 值 true 或 false， 因 此 表达 式 validateIdno(idno) 
可 以 构成 让 语句 中 的 条 件 。 


(1 RegExp 对 象 


除 String 对 象 及 其 search 方法 外 ， 也 可 以 通过 RegExp 对 象 及 其 test 方法 验证 特定 字 
符 串 的 格式 有 效 性 。 
【 例 1-7】 改写 【 例 11-6】 中 的 函数 validateIdno， 应 用 RegExp 对 象 验 证 身份 证 号 码 
的 格式 有 效 性 。 定 义 函 数 validateIdno 的 JavaScript 代码 如 下 : 
function validateIdno(s idno) { 
Var regex=/^\d{17}[\dx] $/ 
return regex.test(s idno); 
} 


在 上 述 JavaScript 代码 中 ， 第 1 条 语句 直接 使 用 正则 表达 式 的 字面 值 /Ad{17}[\dX]3/ 
创建 RegExp 对 象 regex。 在 正则 表达 式 /Ad{f17}[dX]3/ 中 ， 脱 字符 (^) 表示 必须 以 其 后 
的 特定 字符 〈 或 字符 串 ) 开始 ， 美 元 符号 〈$) 表示 必须 以 其 前 的 特定 字符 (或 字符 串 ) 
结束 。 

在 第 2 条 语句 中 ， 通 过 RegExp 对 象 regex 调用 test 方 法 验证 在 string 类 型 的 变量 s_idno 
中 存储 的 字符 串 是 否 是 有 效 的 身份 证 号 码 。 如 果 是 有 效 的 身份 证 号 码 ， 则 test 方法 返回 
true; 和 否则，test 方法 返回 false。 

而 使 用 正则 表达 式 / 八 w+(Q)?Ww+)*@Ww+(Q)?Ww+)*Qw{2.3})+8/ 则 可 以 更 有 效 地 验 
证 电子 邮箱 字符 串 的 格式 有 效 性 ， 其 中 各 个 部 分 的 含义 如 下 : 

(1)\Ww 是 一 个 转 义 结构 的 字符 类 别 ， 表 示 一 个 数字 字符 (0~~9)、 大 写字 母 (A~Z)、 
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下 画 线 (_) 或 小 写字 母 (a~z) 。\w+ 表 示 转 义 结构 \w 可 以 出 现 一 次 或 多 次 。 

(2) \. 也 是 一 个 转 义 结构 ， 表 示 一 个 句号 (.) 。()? 表 示 句 号 〈.) 可 以 出 现 零 次 或 
二 

(3) (2?\w+ 表 示 ()2 和 \w+ 的 连接 ，(()?\w+H)* 表 示 ()?w+ 可 以 出 现 零 次 或 多 次 。 

(4) \w{2,3} 表 示 转 义 结构 \w 可 以 出 现 2 次 或 3 次 。\\w{2,3} 表 示 句 号 (.) 和 \w{2,3} 
的 连接 。Q\w{2,3})+ 表 示 \\w{2,3} 可 以 出 现 一 次 或 多 次 。 

【 例 11-8】 改写 【 例 11-4】 中 的 函数 validateEmail， 应 用 RegExp 对 象 验证 电子 邮箱 
字符 串 的 格式 有 效 性 。 定 义 函 数 validateEmail 的 JavaScript 代码 如 下 : 


function validateEmail(s email) { 
Var regezx=/^\w+((\.)?\w+)*@\w+((\.)?\w+)*(\.\w{2,3})+$/ 
//var regex=new RegExp(™~\\w+((\\-.)?\\Ww+)*@\\w+t((\\.) ?NNw+t)*#(\\.\\w{2,3})+$") 
return regex.test(s email); 

} 


然后 ， 用 以 下 JavaScript 代码 测试 函数 validateEmail。 


<script type="text/javascript"> 
var email="Lisi@sina.com" 
//var email="si.Li@sina.com" 
//var email="si Li@sina.com" 
//var email="si. Li@sina.com.cn" 
//var email="si .Li@sina.com.cn" 
//var email="si.si.Li@sinaGoogle.com.cn" 


//var email="si..Li@sina.com" 
//var email=".siLi@sina.com.cn" 
//var email="si.Li@sina.com.china" 
document .write ("电子 邮箱 "+email) 


if (validateEmail (email)) document .write(" 通过 验证 ! ") 
else document .write (" 没有 通过 验证 ! ") 
</script> 


于 .. 与 (不 匹配 ， 所 以 字符 串 "si..Li@sina.com" 不 是 有 效 的 电子 邮箱 ;字符 串 
".siLi@sina.com.cn” 中 的 第 1 个 字符 是 句号 (.) ， 与 Aw+ 不 匹配 ， 因 此 也 不 是 有 效 的 电子 
邮箱 ; .china 与 Q\w{2,3})+$ 不 匹配 ， 所 以 字符 串 "siLi@sina.com.china" 也 不 是 有 效 的 电 
子 邮箱 。 

注意 : 

@ 在 正则 表达 式 中 ， 单 个 的 句号 (.) 是 一 个 属于 字符 类 别 且 具有 特定 含义 的 字符 ， 
表示 除 \r ( 回 车 ) 和 \n (换行 ) 外 的 任意 字符 。 因 此 ， 在 验证 电子 邮箱 格式 有 效 性 的 正则 表 
达 式 / 八 w+(Q.)?Ww+*@Ww+(Q.)?Ww+)*Q(.\w{2,3})+$/ 中 ， 必 须 使 用 转 义 结构 \ 表示 一 个 句 
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ks 

@ 在 函数 validateEmail 中 ， 可 以 使 用 两 种 方法 之 一 创建 RegExp 对 象 一 一 第 1 条 语句 
使 用 正则 表达 式 的 字面 值 /ANw+(()?Vw+)*G@NVw+(()?Vw+)*CNVw{2.3})+S/ 创建 RegExp 对 
象 ， 第 2 条 语句 通过 调用 构造 函数 new RegExp("...") 创建 RegExp 对 象 。 

@ 通过 调用 构造 函数 new RegExp("...") 创建 RegExp 对 象 时 ， 需 要 对 \w 和 \. 进 行 二 
次 转 义 ， 即 在 \w 和 \. 的 前 面 再 加 一 个 反 儿 杠 (\) 。 


人 Array 对 象 


在 程序 设计 中 经 常 需 要 使 用 数组 。 数 组 (Array) 通常 是 由 一 组 相同 类 型 的 元 素 构成 的 
有 序 集合 。 数 组 可 以 是 一 维 的 ， 也 可 以 是 二 维 的 。 在 数组 及 其 应 用 中 ， 最 常见 的 是 一 维 
数组 。 


11.5.1 ”数组 的 逻辑 结构 














图 11-2 是 一 维 数组 的 逻辑 结构 示意 图 。 其 中 ，ei 表示 一 维 数组 中 的 第 寺 1 个 元 素 
(Element) 。 数 组 中 的 所 有 元 素 属于 同一 种 类 型 。 数 组 中 的 元 素 个 数 称 为 数组 长 度 
(Length) 。 数 组 中 的 元 素 可 以 用 下 标 〈Index) 标识 和 指定 。 在 一 维 数 组 中 ， 第 i 个 元 素 
ei-l 的 下 标 是 i-1。 因 此 ， 元 素 的 下 标 介 于 0 和 数组 长 度 减 1 之 间 。 


元 素 [olale Ts ll [el | 
元 素 下 标 0 1 2 E 4 5 6 7 8 
数组 长 度 (9) 


图 11-2 数组 长 度 、 元 素 及 其 下 标 


11.5.2 ”创建 Array 对 象 


在 JavaScript 中 ， 数 组 及 其 功能 是 通过 Array 对 象 实现 的 。 在 JavaScript 中 ， 可 以 使 用 
以 下 两 种 方法 创建 Array 对 象 ， 同 时 为 每 个 数组 元 素 赋 初 值 。 
var title=new Array ("新 浪 网 ", "百度 网 "); 


var link=["http://www.sina.com", "http://www.baidu.com", "http://www.sohu.com"]; 

其 中 ， 第 1 种 方法 使 用 new 运算 符 和 Array 构造 函数 创建 了 数组 名 为 title 的 Array 对 
象 ， 第 2 种 方法 直接 使 用 方 括号 创建 了 数组 名 为 link 的 Array 对 象 ， 两 个 数组 各 有 2 个 和 
3 个 元 素 ， 每 个 元 素 都 是 一 个 字符 串 。 
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11.5.3 Array 对 象 的 length 属性 和 数组 元 素 


每 个 Array 对 象 都 拥有 属性 length， 该 属性 表示 数组 的 长 度 ， 即 数组 中 的 元 素 个 数 。 
在 JavaScript 中 ， 可 以 按照 “数组 名 .length ”的 格式 访问 一 个 数组 的 长 度 。 例 如 ， 
title.length 就 表示 数组 title 的 长 度 ， 即 该 数组 中 的 元 素 个 数 。 

在 JavaScript 中 ， 可 以 按照 “数组 名 [下 标 ]” 的 格式 访问 数组 元 素 ， 例 如 ，title[0] 表 示 
数组 title 中 的 第 1 个 元 素 ，title[2] 表 示 数 组 title 中 的 第 3 个 元 素 。 

【 例 11-9】 Array 对 象 及 其 应 用 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 


<script type="text/javascript"> 
var title=new Array ("新 浪 网 ", "百度 网 "); 
alert (title.length); //? 
title[title.length]=" 搜 狐 网 "; // 在 数组 最 后 追加 一 个 元 素 
alert (title.length); //? 
alert ((typeof title)); PR 
alert ((typeof title[0])); //? 


var link=["http://www.sina.com", "http://www.baidu.com", "http://www.sohu.com"]; 
var pictureIndex=0; 


for (i=1;i<=7;i++) { 
document .write ("第 "+i+" 次 循环 : "+"<a href="'"+ 
link[pictureIndex]+"'>"+title[pictureIndex]+"</a><br/>"); 
pictureIndex= (pictureIndex+1)%3; 
} 
</script> 


在 以 上 JavaScript 代码 的 for 循环 中 ， 反 复 使 用 数组 tile 和 link 中 的 字符 串 创建 文本 超 
链接 。 以 上 JavaScript 代码 在 正 浏览 器 中 的 输出 如 图 11-3 所 示 。 




















图 11-3 ”使 用 数组 中 的 字符 串 创 建文 本 超 链接 


注意 : 在 本 例 中 ，title 是 一 个 指 代 Array 对 象 的 变量 ， 因 此 属于 object 类 型 。 同 时 ， 
title 也 表示 一 个 数组 。 在 title 数组 中 ， 每 个 元 素 title[pictureIndex] 用 于 存储 字符 串 ， 属 于 
string 类 型 。 类 似 地 ，link 也 是 一 个 指 代 Array 对 象 的 变量 ， 属 于 object 类 型 。 在 link 数组 
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中 ， 每 个 存储 字符 串 的 元 素 link[pictureIndex] 属 于 string 类 型 。 
11.5.4 Array 对 象 的 方法 


通过 Array 对 象 ， 可 以 调用 表 11-4 中 的 常用 方法 对 数组 中 的 元 素 进行 相应 的 处 理 。 
表 11-4 Array 对 象 的 常用 方法 








让 这 作用 及 返回 值 
ep] 合并 两 个 或 多 个 数组 ， 开 返回 一 个 新 数组 

将 数组 中 元 素 的 位 置 闫 倒 ， 即 第 1 个 元 素 成 为 最 后 一 个 ， 第 2 个 元 素 成 为 倒数 
wl 第 2 个 … 最 后 一 个 元 素 成 为 第 1 个 

依据 函数 compareFunction 定义 的 顺序 ( 即 根据 函数 compareFunction 比较 数组 
tiling 中 元 素 的 大 小 ) 对 数组 元 素 进行 排序 。 如 果 省 略 比较 函数 compareFunction, 元 





素 将 按照 转换 为 的 字符 串 的 逐个 字符 的 Unicode 编码 进行 排序 


注意 : concat 方法 不 会 改变 原 有 数组 ， 而 只 是 返回 一 个 合并 了 原 有 数组 中 元 素 的 新 
数组 。 


【 例 11-10】 Array 对 象 的 方法 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 


<script type="text/javascript"> 
Var arrl=new Array(1,2); 
var arr2=[4,8]; 
Var arr3=new Array(); arr3[0]=8; arr3[1]=16 
document .write("---—— 数组 合并 之 前 : <br>"); 
document .write ("数组 arrl 中 的 元 素 : "+arrl+"<br>"); 
document .write ("数组 arr2 中 的 元 素 : "+arr2+"<br>") 7 
document .write ("数组 arr3 中 的 元 素 : "+arr3+"<br>") 7 


Var arr4=arrl .concat (arr2,arr3); 

document .write("---—— 数组 合并 之 后 : <br>"); 
document .write ("数组 arr4 中 的 元 素 : "+arr4+"<br>") 7 
document .write ("数组 arrl 中 的 元 素 : "+arrl+"<br>")，; 
document .write ("数组 arr2 中 的 元 素 : "+arr2+"<br>")，; 
document .write ("数组 arr3 中 的 元 素 : "+arr3+"<br>"); 


// 直 接 排序 时 ， 首 先 将 数组 arr4 中 的 数据 转换 为 字符 串 数据 ， 然 后 再 排序 
arr4.sort (); 

document .write("-————-— 数组 元 素 直 接 排序 〈 按 字符 串 数 据 排序 ) 之 后 : <br>"); 
document .write ("数组 arr4 中 的 元 素 : "+arr4+"<br>") 7 


function compareFunction (el,e2) { // 首 先 定 义 比较 函数 compareFunction 
return parseInt (el)-parseInt (e2); 

} 

arr4.sort (compareFunction); // 然 后 依据 比较 函数 compareFunction 的 返回 值 排序 

// 如 果 compareFunction (el,e2) 小 于 0，el 排 在 e2 之 前 

// 如 果 compareFunction (el,e2) 等 于 0，el 和 ez2 的 前 后 顺序 不 变 

// 如 果 compareFunction (el,e2) 大 于 0，el 排 在 e2 之 后 

document .write("————— 按 数值 整数) 升序 排序 之 后 : <br>") ; 
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document .write ("数组 arr4 中 的 元 素 : "+arr4+"<br>"); 
// 丰 倒数 组 中 元 素 的 位 置 。 第 1 个 元 素 成 为 最 后 一 个 , 第 2 个 元 素 成 为 倒数 第 2 个 …… 最 后 一 个 
元 素 成 为 第 1 个 


arr4.reVverse() 





document . write ("=——— 颠倒 数组 中 元 素 的 位 置 ( 即 相当 于 降序 排序 ) 之 后 : <br>"); 
document .write ("数组 arr4 中 的 元 素 : "+arr4+"<br>"); 
</script> 


在 本 例 中 ， 首 先 创建 并 定义 了 arrl、arr2 和 arr3 三 个 数组 ， 每 个 数组 包含 2 个 元 素 ， 
每 个 元 素 又 都 是 整数 。 然 后 通过 arrl 数组 对 象 调用 concat 方法 ， 将 数组 arrl 、arr2 和 arr3 
三 个 数组 中 的 元 素 合 并 在 一 个 新 的 数组 arr4 中 。 新 数组 arr4 包含 六 个 元 素 ， 分 别 来 自 
arrl 、arr2 和 arr3 三 个 数组 ， 而 arrl、arr2 和 arr3 三 个 数组 中 元 素 并 不 会 发 生 改变 。 

接 下 来 ， 直 接 调用 sort 方法 对 数组 arr4 进行 排序 。 此 时 ，sort 方法 首先 将 数组 arr4 中 
的 整数 转换 为 字符 串 数据 然后 再 排序 ， 此 后 数组 中 元 素 的 顺序 为 116248 8。 

也 可 以 首先 定义 比较 函数 compareFunction(el,e2)， 然 后 在 调用 sort 方法 时 将 比较 函数 
compareFunction 作为 参数 ， 这 样 可 以 依据 比较 函数 compareFunction 的 返回 值 对 数组 arr4 
进行 排序 。 此 时 ， 如 果 compareFunction(el,e2) 小 于 0， 则 元 素 el 排 在 元 素 e2 之 前 ;如 果 
compareFunction(el,e2) 等 于 0， 则 元 素 el 和 元 素 e2 的 前 后 顺序 不 变 ; 如 果 
compareFunction(el,e2) 大 于 0， 则 元 素 el 排 在 元 素 e2 之 后 。 此 后 ， 数 组 中 元 素 的 顺序 将 
变 为 124 8 8 16， 这 种 排序 结果 符合 数值 升序 的 含义 。 

最 后 ， 通 过 数组 对 象 arr4 继续 调用 reverse 方法 ， 可 以 颠倒 数组 中 元 素 的 位 置 。 此 
时 ， 数 组 中 元 素 的 顺序 将 变 为 16 8 8 42 1， 这 种 排序 结果 符合 数值 降序 的 含义 。 

注意 : JavaScript 支持 结构 化 程序 设计 ， 同 时 也 是 一 种 基于 对 象 的 脚本 语言 。 此 外 ， 
JavaScript 还 支持 函数 式 程序 设计 (Functional Programming) 。 在 函数 式 程序 设计 中 ， 一 个 
函数 可 以 作为 男 一 个 函数 的 参数 。 如 在 本 例 中 调用 sort 函数 对 数组 arr4 进行 排序 时 ， 即 是 
将 比较 函数 compareFunction 作为 参数 ， 这 样 可 以 依据 比较 函数 compareFunction 的 返回 值 
对 数组 arr4 进行 排序 。 


11.5.5 ”使 用 for-in 语句 遍历 数组 


遍历 数组 ， 也 称 迭 代 (Iteration)， 是 指 依次 访问 数组 中 的 每 个 元 素 。 在 JavaScript 中 ， 
可 以 使 用 for-in 语句 遍历 数组 。 
【 例 11-11】 使 用 for-in 语句 验证 【 例 11-8】 中 电子 邮箱 字符 串 的 格式 有 效 性 。HTML 
文档 主体 中 的 JavaScript 代码 如 下 : 
<script type="text/javascript"> 
var emails=["Lisi@sina.com","si.Li@sina.com","si Li@sina.com", 
"si. Li@sina.com.cn","si .Li@sina.com.cn","si.si.Li@sinaGoogle.com.cn", 
"si..Li@sina.com",".siLi@sina.com.cn", "si.Li@sina.com.china"] 


for (var index in emails) { 
document .write ("电子 邮箱 "+emails[index]) 


if (validateEmail (emails[index])) document .write(" 通过 验证 ! <br/>") 
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else document .write ("” 没有 通过 验证 ! <br/>") 
} 
</script> 


在 上 述 JavaScript 代码 中 ， 首 先 将 需要 验证 格式 有 效 性 的 电子 邮箱 字符 串 组 织 在 数组 
emails 中 ， 然 后 在 for-in 语句 的 循环 体 中 调用 函数 validateEmail 验证 每 个 电子 邮箱 字符 串 
的 格式 有 效 性 。 在 forin 语句 中 ， 变 量 index 指 代数 组 元 素 的 下 标 。 


(1 Math 对 象 


在 JavaScript 中 ， 内 置 对 象 Math 拥有 一 组 表示 数学 常数 的 属性 ， 如 Math.E 表示 自然 
对 数 的 底数 〈 约 等 于 2.718) ，Math.PI 表示 圆周 率 。 
通过 Math 对 象 ， 可 以 调用 表 11-5 中 的 常用 方法 进行 相应 的 数学 计算 。 
表 11-5 Math 对 象 的 常用 方法 
方 ”法 作用 及 返回 值 应 用 举例 


Math abs(-10) 的 返回 值 是 10 
Mathabs(x) 。 “| 返回 数值 x 的 绝对 值 i 102 
Math ceil(3.45) 的 返回 值 是 4 
Math .ceil(-3.45) 的 返回 值 是 -3 
Math floor(3.45) 的 返回 值 是 3 
JMath floor(-3.45) 的 返回 值 是 -4 





Math.ceil(x) 返回 大 于 或 等 于 数值 x 的 最 小 整数 


Math.floor(x) 返回 小 于 或 等 于 数值 x 的 最 大 整数 


Mathrandom() | 随机 生成 一 个 区 间 [0,1) 内 的 小 数 
Mathround(20.49) 的 返回 值 是 20 
Math round(20.5) 的 返回 值 是 21 
Math round(-20.5) 的 返回 值 是 -20 
Math round(-20.51) 的 返回 值 是 -21 


注意 : 内 置 对 象 Math 的 所 有 属性 和 方法 都 是 静态 的 。 因 此 ， 访 问 Math 对 象 的 属性 
时 ， 必 须 使 用 Math.propertyName 的 格式 ， 如 Math.PI; 而 通过 Math 对 象 调用 方法 时 ， 必 
须 使 用 “Math.methodName” 的 格式 ， 如 Math.ceil(3.45)。 


OD ve 


JavaScript 文 持 结构 化 程序 设计 ， 同 时 也 是 一 种 基于 对 和 象 的 脚本 语言 。JavaScript 预先 
创建 了 一 些 内 置 对 象 (Built-in Objects) ， 在 每 个 内 置 对 象 中 又 预先 定义 了 相应 的 属性 
(Property) 和 方法 (Method) 。 

在 JavaScript 中 ， 对 象 (Object) 也 拥有 属性 和 方法 。 属 性 描述 了 对 象 的 一 些 基 本 特 
征 ， 而 方法 则 是 能 够 通过 对 象 执行 的 操作 。 

在 JavaScript 中 ， 为 了 使 用 在 Date、String 和 Array 内 置 对 象 中 预先 定义 的 属性 和 方 
法 ， 必 须 首先 创建 相应 的 Date、String 和 Array 对 象 。 





Mathround(x) | 返回 一 个 四 舍 五 入 后 最 接近 数值 x 的 整数 
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Date 对 象 用 于 存储 和 处 理 日 期 和 时 间 ，String 对 象 用 于 存储 和 处 理 字符 串 ，Array 对 
象 用 于 保存 和 处 理 一 组 具有 相同 类 型 的 数据 。 

在 JavaScript 中 经 常 使 用 string 类 型 的 变量 存储 字符 串 ， 并 通过 string 类 型 的 变量 调用 
在 String 内 置 对 象 中 预先 定义 的 方法 ， 同 样 可 以 完成 字符 串 处 理 任务 。 

使 用 正则 表达 式 ， 可 以 描述 某 些 特殊 用 途 的 字符 串 数据 所 共同 具有 的 特征 或 格式 。 

应 用 正则 表达 式 和 String 对 象 的 search 方法 (或 者 RegExp 对 象 的 test 方法 ) ， 可 以 
方便 地 验证 某 些 字符 串 数据 的 格式 有 效 性 。 

JavaScript 支持 函数 式 程序 设计 。 在 函数 式 程序 设计 中 ， 一 个 函数 可 以 作为 另 一 个 函 
数 的 参数 。 因 为 JavaScript 也 是 一 种 函数 式 编程 语言 。 

内 置 对 象 Math 的 所 有 属性 和 方法 都 是 静态 的 。 


(La 习题 


1. 编写 JavaScript， 验 证 表 11-2 中 有 关 String 对 象 方法 的 应 用 举例 。 

2. 将 【 例 11-4】 和 【 例 11-6】 中 的 JavaScript 函数 validateEmail 和 validateIdno 定义 
在 同一 个 外 部 脚本 文档 中 ， 然 后 在 一 个 HTML 文档 中 演示 对 这 两 个 函数 的 调用 。 

3. 在 HTML 文档 头 部 定义 JavaScript 函数 getAge， 该 函数 能 够 根据 格式 有 效 的 身份 
证 号 码 计 算 年 龄 。 具 体 要 求 如 下 : 

(1) 函数 定义 中 的 形式 参数 名 使 用 s_idno， 表 示 一 个 身份 证 号 码 字 符 串 。 

(2) 函数 的 返回 值 即 是 根据 身份 证 号 码 计算 的 年 龄 ， 且 是 一 个 整数 。 

然后 ， 在 HTML 文档 主体 用 一 个 格式 有 效 的 身份 证 号 码 字符 串 测试 函数 getAge， 并 
在 Web 浏览 器 中 输出 该 身份 证 号 码 及 相应 的 年 龄 ， 以 验证 该 函数 及 其 JavaScript 代码 的 正 
确 性 。 

4. 分 析 并 判断 以 下 JavaScript 在 Web 浏览 器 中 的 输出 ， 然 后 通过 上 机 编程 验证 你 的 
判断 。 


<script type="text/javascript"> 



































var regex=/^[abc]$/ 
document .write (regex.test ("a")+" "+regex.test ("ab")+"<br/>") 


regex=/^[^abc]$/ 
document .write (regex.test ("A")+" "+regex.test ("a")+"<br/>") 


regex=/^[0=9]$/ 


document .write (regex.test ("0")+" "+regex.test ("a0")+"<br/>") 


regex=/[0-9]/ 


document .write (regex.test ("0")+" "+regex.test ("a0")+"<br/>") 


regex=/^([0-9] |X) $/ 
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document .write (regex.test ("0")+" "+regex.test ("0X")+"<br/>") 


regex=/ ([0-9] |X)/ 


document .write (regex.test ("0")+" "+regex.test ("0X")+"<br/>") 


regex=/^ (red|lbluelgreen)$/ 
document .write (regex.test ("red")+" "+regex.test ("yellow")+"<br/>") 
</script> 


5. 某 班 同学 及 其 成 绩 使 用 字符 串 数据 表示 如 下 : 

Var nameScorestr=" 小 明 :87; 小 花 :81; 小 红 :97; 小 天 :76; 小 张 :74; 小 小 :94; 小 廿 :90; 小 
伍 :76; 小 迪 :64; 小 曼 :76" 

现在 要 求 按照 如 下 格式 显示 相关 信息 : 

XXXX 年 XX 月 XX 日 星期 x 

班级 总 分 为 : 815 

平均 分 为 82 

具体 要 求 如 下 : 

(1) 显示 当前 日 期 ,格式 类 似 “XXXX 年 XX 月 XX 日 星期 X”。 

(2) 统计 班级 总 分 ， 并 计算 班级 平均 分 四舍五入 保留 整数 )。 
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表单 (Form) 是 网 页 中 常见 的 要 素 。 通 过 表单 ，Web 浏览 器 可 以 接收 用 户 输入 的 数 
据 ， 然 后 使 用 JavaScript 处 理 表单 数据 或 验证 表单 数据 的 有 效 性 。 


《2 表单、 控件 及 其 属性 


使 用 HIML 中 的 form 元 素 和 input 元 素 ， 可 以 在 网 页 中 定义 和 创建 表单 。 定 义 和 创 建 
表单 的 主要 代码 及 格式 如 下 : 
<form action=" "> 
<input type=" " name=" " value=" "/> 


<input type=" " name=" " value=" "/> 
</form> 


其 中 ，form 元 素 的 开始 标签 和 结束 标签 定义 表单 的 开头 和 结尾 。fom 元 素 的 action 属 
性 值 可 以 用 于 指定 提交 表单 之 后 将 进入 的 下 一 个 页 面 。 
form 元 素 内 部 通常 包含 若干 个 input 元 素 ， 每 个 input 元 素 定义 一 个 控件 (Control) 。 
在 input 元 素 中 ，type 属性 用 于 指定 input 元 素 所 定义 控件 的 类 型 。 常 用 的 type 属性 值 
有 text、password、button、submit 和 reset， 分 别 定义 文本 框 、 密 码 域 、 按 钮 、 提 交 按 钮 和 
重 置 按 钮 五 种 类 型 的 控件 。 其 中 ， 文 本 框 和 密码 域 用 于 接收 用 户 输入 的 数据 ， 按 钮 用 于 一 
般 表 单 操作 ， 提 交 按 钮 和 重 置 按钮 用 于 特定 表单 操作 。 
name 属性 用 于 对 input 元 素 所 定义 的 控件 进行 命名 ， 在 JavaScript 中 可 以 使 用 name 属 
性 值 指 定 input 元 素 所 定义 的 控件 。 这 样 ，JavaScript 即 可 根据 name 属性 值 对 控件 进行 引 
用 或 操作 。 
value 属性 可 用 于 指定 文本 框 和 密码 域 的 初始 值 ， 也 可 用 于 设置 在 按钮 、 提 交 按 钮 和 
重 署 按钮 上 显示 的 文字 。 
【 例 12-1】 使 用 form 和 input 元 素 在 网 页 中 定义 和 创建 表单 。HTML 文档 主体 中 的 代 
人 码 如 下 : 
<form action="http://www.sina.com"> 
* 电 子 邮 箱 : <input type="text" name="email" value="a@b.cd"/> 
身份 证 号 码 : <input type="text" name="idno" value="123456789012345678"/> 
密码 : <input type="password" name="pwd"/> 
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<input type="submit" value=" 提 交 "/> 
<input type="reset" value=" 重 置 "/> 
</form> 


如 图 12-1 所 示 ， 表 单 包 含 由 input 元 素 定义 的 五 个 控件 。 

第 1 个 控件 是 文本 框 ， 用 于 接收 用 户 输入 的 电子 邮箱 ， 其 初始 值 即 是 value 属性 值 
“a@b.c” 。 

第 2 个 控件 也 是 文本 框 ， 用 于 接收 用 户 输入 的 身份 证 号 码 ， 其 初始 值 即 是 value 属性 
值 “123456789012345678”。 

第 3 个 控件 是 密码 域 ， 用 于 接收 用 户 输入 的 密码 。 文 本 框 和 密码 域 的 作用 基本 相同 ， 
都 可 以 接收 用 户 输入 的 数据 。 两 者 的 主要 区 别 在 于 : 在 密码 域 中 输入 密码 时 ， 密 码 字 符 以 
圆 点 来 显示 。 这 样 ， 旁 边 的 其 他 人 就 看 不 到 密码 字符 ;而 在 文本 框 中 则 直接 显示 用 户 输入 
的 字符 。 

第 4 个 控件 是 提交 按钮 ， 在 该 按钮 上 显示 的 文字 即 是 value 属性 值 “ 提 交 ”。 单 击 该 
按钮 ， 可 以 打开 由 form 元 素 的 action 属性 值 所 指向 的 网 页 。 

第 5 个 控件 是 重 置 按钮 ， 在 该 按钮 上 显示 的 文字 即 是 value 属性 值 “ 重 置 ”。 单 击 该 
按钮 ， 可 以 重 置 文本 框 和 密码 域 中 的 初始 值 。 
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二 尿 杏 天 痢 第 一 个 表单 











# 电 子 邮箱 : [Ge ] 身份 证 号 码 ，[123055760012345576 | 密码 : [ee 

















文本 框 文本 框 密码 域 ”提交 按钮 
图 12-1 表单 及 其 控件 


注意 : 在 HIML 中 ，input 元 素 是 行内 元 素 。 如 图 12-1 所 示 ， 由 input 元 素 所 定义 的 
五 个 控件 在 同一 行 中 从 左 向 右 依 次 排列 。 
【 例 12-2】 参照 图 12-2 所 示 , 使 用 蕊 和 二 元 素 以 及 div+CSS 对 图 12-1 中 的 表单 控件 


志 使 用 ul 和 1i 元 素 布 局 表单 Windows Internet Explorer 
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图 12-2 使 用 ul 和 1i 元 素 以 及 div+CSS 布局 表单 控件 
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为 此 ， 首 先 在 HIML 文档 头 部 定义 内 部 样式 表 ， 具 体 代码 如 下 : 


<style type="text/css"> 
#container { width:800px; margin:0 auto; } 
#mainContent { width:780px; padding:10px; background-color:#CFF; } 


.formstyle { list-style:none; } 
.formstyle 1i { padding:10px Opx; } 


label { display:block; float:left; width:300px; 
padding-top:3px; text-align:right; } 
.SubmitDiv, .resetDiv { display:block; float:left; 
width:200px; padding:1l0px 50px; } 
.submitDiv { text-align:right; } 
.resetDiv { text-align:left; } 
</style> 


然后 ， 在 HTML 文档 主体 定义 和 创建 表单 ， 具 体 代码 如 下 : 


<div id="container"> 
<div id="mainContent"> 
<form action=""> 
<ul class="formstyle"> 
<1i> 
<label>* 电 子 邮 箱 : </label><input type="text" name="email"/> 
</11> 
<1i> 
<label1> 身 份 证 号 码 : </label><input type="text" name="idno"/> 
</1i> 
<1i> 
<label for="pwdID"> 密 码 : </label><input type="password" 1d="pwdID"/> 
</1i> 
<1i> 
<div class="submitDiv"><input type="submit" value=" 提 交 "/></div> 
<div class="resetDiv"><input type="reset" value=" 重 置 "/></div> 
</1i> 
</ul> 
</form> 
</div> 
</div> 


如 上 述 HIML 代码 ， 在 input 元 素 的 前 面 可 以 结合 使 用 label 元 素 ， 这 两 个 元 素 的 具体 
用 法 如 下 : 首先 ， 在 后 面 的 input 元 素 中 使 用 id 属性 为 对 应 的 控件 分 配 唯 一 的 人 D， 然 后 在 
前 面 的 label 元 素 中 使 用 for 属性 ， 并 使 该 属性 值 与 后 面 对 应 input 元 素 的 id 属性 值 一 致 。 
这 样 就 可 以 将 前 面 的 label 元 素 与 后 面 的 input 元 素 绑 定 在 一 起 ， 并 由 1label 元 素 中 的 文本 为 
input 元 素 对 应 的 控件 定义 标记 。 在 本 例 中 ， 由 于 “密码 ”对 应 的 input 和 1label 元 素 分 别 通 
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过 id 和 for 属性 绑 定 在 一 起 ， 所 以 在 表单 中 单 击 文本 “密码 : ”时 ， 焦 点 将 自动 定位 于 后 
面 的 密码 域 。 


注意 : 由 于 “电子 邮箱 ”对 应 的 input 和 label 元 素 没有 绑 定 在 一 起 ， 所 以 在 表单 中 单 
击 文本 “* 电 子 邮 箱 : ”时 ， 焦 点 不 会 自动 定位 于 后 面 的 email 文 本 框 。 类 似 地 ， 在 表单 中 
单 击 文本 “身份 证 号 码 : ”时 ， 焦 点 同样 不 会 自动 定位 于 后 面 的 idno 文本 框 。 


(2> 表单 事件 和 事件 属性 





表单 在 用 户 和 Web 浏览 器 之 间 提 供 了 一 种 交互 界面 ， 而 表单 事件 则 最 终 促成 了 用 户 
和 Web 浏览 器 之 间 的 交互 。 表 单 有 提交 (submit) 和 重 置 (reset) 两 种 事件 。 

例如 ， 在 如 图 12-1 所 示 的 表单 中 ， 由 type 属性 值 为 submit 的 input 元素 定义 “提交 ” 
按钮 ， 单 击 “ 提 交 ” 按 钮 会 触发 提交 表单 事件 。 在 form 元 素 的 开始 标签 中 使 用 onsubmit 
属性 值 ， 可 以 当 发 生 提交 表单 事件 时 通过 调用 JavaScript 函数 处 理 表 单数 据 。 之 后 ， 还 可 
以 打开 由 form 元 素 的 action 属性 值 所 指向 的 网 页 。 

与 “提交 ”按钮 及 其 功能 类 似 ， 在 表单 中 由 type 属性 值 为 reset 的 input 元 素 定义 “ 重 
置 ”按钮 ， 单 击 “ 重 置 ”按钮 会 触发 重 置 表单 事件 。 当 发 生 重 置 表单 事件 时 ， 可 以 重 置 文 
本 框 和 密码 域 中 的 初始 值 。 

【 例 12-3】 测试 表单 事件 和 事件 属性 。 在 如 图 12-3 所 示 的 表单 中 ，“ 登 录 名 ”文本 
框 的 初始 值 是 abce，“ 密 码 ” 密 码 域 的 初始 值 是 123。 单 击 “ 提 交 ” 按 钮 ， 会 将 “登录 名 ”和 
“密码 ”字符 串 连 接 在 一 起 ， 并 在 警告 框 中 显示 。 然 后 ， 在 警告 框 中 单 击 “ 确 定 ” 按 钮 ， 
可 以 打开 【 例 12-1】 中 的 网 页 ( 见 图 12-1) 。 


/ 表单 事件 及 事件 属性 - 于 ndows Internet Explorer 
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XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 表 单 事件 及 事件 属性 </title> 
<script type="text/javascript"> 
// 定 义 连接 文本 函数 
function contatenateText (thisForm) { 
alert (thisForm.login name.valuet+thisForm.pwd.value); 
} 
</script> 
</head> 
<body> 
<form action="12-1- 表 单 .htm" onsubmit="contatenateText (this)"> 
登录 名 : <input type="text" name="login name" value="abc"> 
密码 : <input type="password" name="pwd" value="123"> 
<input type="submit" value=" 提 交 "/> 
<input type="reset" value=" 重 置 "/> 
</form> 

</body> 

</html> 

注意 : 

@ 在 XHTML 文档 头 部 定义 了 JavaScript 函数 contatenateText， 该 函数 的 形式 参数 
thisForm 指 代 一 个 表单 。 

@ 在 XHTML 文档 主体 的 form 元 素 中 使 用 了 onsubmit 属性 ， 其 属性 值 
contatenateText(this) 实 际 上 是 一 条 调用 函数 contatenateText 的 JavaScript 语句 ， 其 中 的 实际 
参数 this 指 代 当前 form 元 素 ( 即 表单 ) 。 这 样 ， 当 发 生 提交 表单 事件 时 ， 就 会 调用 函数 
contatenateText。 

@ 函数 contatenateText 的 形式 参数 thisForm 与 函数 调用 语句 contatenateText(this) 中 的 
实际 参数 this 相对 应 。 函 数 内 的 代码 thisForm.login_name 对 应 表单 中 的 “登录 名 ”文本 框 ， 
而 代码 thisForm login_name.value 则 对 应 该 文本 框 中 的 字符 串 数据 。 类似 地 ， 函 数 内 的 代 
码 thisForm.pwd 对 应 表单 中 的 “密码 ”密码 域 ， 而 代码 thisForm. pwd.value 则 对 应 该 密码 域 
中 的 字符 囊 数 据 ， 
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除 处 理 表单 数据 外 ， 还 可 以 利用 表单 事件 验证 用 户 输入 的 数据 ， 这 样 不 仅 可 以 减轻 
服务 器 端的 工作 负荷 ， 而 且 能 够 充分 利用 客户 机 端的 计算 能 力 ， 从 而 避免 提交 表单 数据 后 
客户 机 等 待 服务 器 响应 的 时 间 过 长 。 因 此 ， 验 证 表单 数据 也 是 JavaScript 在 客户 机 端的 重 
要 应 用 之 一 。 

验证 表单 数据 主要 分 以 下 两 种 情况 : 一 是 必 填 项 验证 ， 即 要 求 在 某 些 文本 框 中 必须 
输入 数据 ， 二 是 格式 验证 ， 即 要 求 在 某 些 文本 框 中 输入 的 数据 必须 符合 一 定 的 格式 。 
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如 图 12-4 所 示 ， 在 “电子 邮箱 ”文本 框 中 必须 输入 非 空 字符 串 。 和 否则 ， 单 击 “ 提 
交 ” 按 钮 时 ， 将 通过 警告 杠 显 示 “ 必 须 填 写 电子 邮箱 ! ”。 


和 验证 作 填 项 - Windows Internet Explorer 
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图 12-4 验证 表单 中 的 必 填 项 


【 例 12-4】 实现 如 图 12-4 所 示 的 表单 数据 必 填 项 验证 。XHTML 及 JavaScript 代码 
如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtm11/DTD/Vxhtm11-strict.dtd"> 
<html Xmlns="http://www.W3.org/1999/Xhtm1"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 表 单数 据 必 填 项 验证 </title> 
<script type="text/javascript"> 
// 必 填 项 验证 函数 
function validateRequired(s_field) { 
var reVal=true // 假 设 字符 串 s_field 非 空 
if (s_ field=="") reVal=false; 
return reVal; 
} 
// 表 单数 据 验证 函数 
function validateFormData (thisForm) { 


var reVal=true // 假 设 表单 中 的 所 有 数据 都 有 效 


if (!validateRequired (thisForm.email.value)) { 
alert ("必须 填写 电子 邮箱 ! ") 
thisForm.email.focus() 
reVal=false 


return reVal7 
} 
</script> 
</head> 
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<body> 
<form action="" onsubmit="return validateFormData (this)"> 
* 电 子 邮箱 : <input type="text" name="email"/> 
<input type="submit" value=" 提 交 "/> 
<input type="reset" value=" 重 置 "/> 
</form> 
</body> 
</html> 


在 XHTML 文档 头 部 ， 定 义 了 两 个 JavaScript 函数 : 函数 validateRequired 验证 参数 
s_field 是 否 为 空 字符 串 ， 即 进行 必 填 项 验证 ;函数 validateFormData 用 于 验证 表单 中 的 各 
项 数据 〈 在 该 表单 中 只 有 “电子 邮箱 ”一 项 数据 ) ， 并 在 其 中 调用 函数 validateRequired 以 
验证 表单 email 文本 框 中 的 输入 是 否 为 空 字符 串 。 

在 XHTML 文档 主体 定义 和 创建 了 一 个 表单 ， 其 中 包括 一 个 email 文本 框 、 一 个 
submit 类 型 的 “提交 ”按钮 和 一 个 reset 类 型 的 “ 重 置 ”按钮 。 由 于 “提交 ”按钮 属于 submit 
类 型 控件 ， 所 以 单 击 “ 提 交 ” 按 钮 会 触发 提交 表单 事件 。 

在 form 元 素 的 开始 标签 中 ，onsubmit 属性 值 是 调用 函数 validateFormData 的 
JavaScript。 这 样 ， 提 交 表单 事件 就 与 函数 validateFormData 绑 定 在 一 起 一 一 当 单 击 “ 提 
交 ” 按 钮 时 ,会 触发 提交 表单 事件 ， 然 后 通过 onsubmit 属性 值 调 用 函数 
validateFormData。 函 数 validateFormData 也 因此 称 为 与 提交 表单 事件 绑 定 的 事件 处 理 函 数 
(Event Handler) 。 

在 form 元 素 的 开始 标签 中 ， 通 过 onsubmit 属性 值 调用 事件 处 理 函 数 validateFormData 
时 ， 使 用 了 指 代 当 前 form 元 素 〈 即 表单 ) 的 保留 字 this 作为 实际 参数 。 相 应 地 ， 函 数 
validateFormData 定义 中 的 形式 参数 thisForm 也 同样 指 代表 单 。 在 函数 validateFormData 中 
调用 函数 validateRrequired 时 ， 实 际 参数 email.value 指 代表 单 email 文本 框 中 的 字符 串 数 
据 。 相 应 地 ， 函 数 validateRrequired 定义 中 的 形式 参数 s field 也 同样 指 代 表单 email 文本 
框 中 的 字符 串 数据 。 

如 果 在 表单 email 文本 框 中 没有 输入 任何 字符 或 输入 的 是 空 字 符 串 ， 函 数 
validateRrequired 的 返回 值 就 是 false， 表 示 此 项 数据 没 能 通过 必 填 项 验证 。 相 应 地 ， 函 数 
validateFormData 中 的 让 条 件 成 立 ， 然 后 通过 警告 框 显 示 “ 必 须 填写 电子 邮箱 ! ”， 并 返 
回 false。 此 时 ， 由 于 函数 validateFormData 的 返回 值 是 false， 所 以 不 会 打开 由 form 元素 的 
action 属性 值 所 指向 的 网 页 ， 而 在 Web 浏览 器 中 保持 当前 页 面 。 

如 果 在 表单 email 文本 框 中 输入 非 空 字符 串 ， 函 数 validateRequired 的 返回 值 就 是 
true， 表 示 此 项 数据 通过 必 填 项 验证 。 相 应 地 ， 函 数 validateFormData 中 的 站 条 件 不 成 立 ， 
并 返回 true。 此 时 ， 由 于 函数 validateFormData 的 返回 值 是 tue， 所 以 准备 打开 由 form 元 
素 的 action 属性 值 所 指向 的 网 页 。 但 由 于 action 属性 值 为 空 值 ， 所 以 也 将 在 Web 浏览 器 中 
保持 当前 页 面 。 

注意 : 

@ 单 击 “提交 ”按钮 会 触发 提交 表单 事件 。 此 时 ， 首 先 调用 事件 处 理 函 数 
validateFormData， 然 后 在 函数 validateFormData 中 还 会 进一步 调用 函数 validateRequired， 
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并 由 函数 validateRequired 验证 表单 email 文本 框 中 的 输入 是 否 为 空 字符 串 。 

@ 在 JavaScript 中 ， 可 以 将 表单 及 其 中 的 控件 看 作对 象 。 例 如 ， 在 函数 validateFormData 
中 ， 代 码 email.value 表示 email 文 本 框 对 象 的 value 属性 ， 代 码 email.focus() 表 示 通 过 email 
文本 框 对 象 调用 focus 方法 并 将 焦点 定位 于 该 文本 框 中 。 


【 例 12-$】 参照 图 12-4 中 的 表单 设计 ， 并 在 【 例 12-4】 的 基础 上 实现 “电子 邮箱 ” 
的 必 填 项 验证 以 及 格式 验证 。 单 击 “ 提 交 ” 按 钮 后 ， 验 证 “电子 邮箱 ”的 过 程 按照 以 下 步 
又 进行 

(1) 对 “电子 邮箱 ”进行 必 填 项 验证 。 如 果 不 能 通过 必 填 项 验证 ， 则 通过 警告 框 显 示 
“必须 填写 电子 邮箱 ! ”， 然 后 终止 表单 数据 验证 过 程 ， 并 将 焦点 定位 于 “电子 邮箱 ” 文 





本 框 中 。 

(2) 对 “电子 邮箱 ”进行 格式 验证 。 如 果 不 能 通过 格式 验证 ， 则 通过 警告 框 显示 “ 电 
子 邮 箱 格式 无 效 ! ”， 然 后 终止 表单 数据 验证 过 程 ， 并 将 焦点 定位 于 “电子 邮箱 ”文本 
框 中 。 

其 他 要 求 如 下 : 


(1) 定义 和 使 用 函数 validateRequired(s_field) 对 “电子 邮箱 ”进行 必 填 项 验证 ， 其 中 
的 形式 参数 s_field 是 一 个 表示 “电子 邮箱 ”的 字符 串 。 

(2) 定义 和 使 用 函数 validateEmail(s_email) 对 “电子 邮箱 ”进行 格式 验证 ， 其 中 的 形 
式 参 数 s_email 也 是 一 个 表示 “电子 邮箱 ”的 字符 串 。 

(3) 定义 和 使 用 函数 validateFormData(thisForm) 进 行 表单 数据 验证 ， 其 中 的 形式 参数 
thisForm 指 代表 单 。 此 外 ， 在 该 函数 内 依次 调用 函数 validateRequired 和 validateEmail 以 实 
现 “ 电 子 邮箱 ”的 必 填 项 验证 以 及 格式 验证 。 

为 了 实现 “电子 邮箱 ”的 格式 验证 ， 首 先 在 【 例 12-4】 的 XHTML 文档 头 部 增加 函数 
validateEmail 的 定义 ， 具 体 的 JavaScript 代码 如 下 : 

function validateEmail(s email) { 

var reVal=true /7 假设 字符 串 s_email 表示 的 电子 邮箱 格式 有 效 
var atpos=s_email.indexOof("@") 
Var dotpos=s_email .lastIndexOof (".") 


if (atpos<111dotpos-atpos<2) reVal=false 
return reVal 
} 


然后 ， 在 XHTML 文档 头 部 的 函数 validateFormData 中 增加 一 些 JavaScript 代码， 以 调 
用 实现 “电子 邮箱 ”格式 验证 的 函数 validateEmail， 并 根据 函数 返回 值 进行 相应 的 流程 控 
制 ， 具 体 的 JavaScript 代码 如 下 : 


function validateFormData (thisForm) { 


var reVal=true // 假 设 表单 中 的 所 有 数据 都 有 效 





if (!validateRequired (thisForm.email.value)) { 


alert ("必须 填写 电子 邮箱 ! ") 
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thisForm.email .focus() 
reVal=false 
} 
else 
if (!validateEmail (thisForm.email.value)) { 
alert ("电子 邮箱 格式 无 效 ! "); 
thisForm.email.focus () 
reVal=false 
} 


return reVal 
} 


(2 网 页 的 Web 标准 


JavaScript 及 其 验证 表单 数据 的 功能 体现 了 网 页 Web 标准 的 一 个 层次 : 行为 
(Behavior) 一 一 用 户 能 够 通过 表单 与 Web 浏览 器 进行 交互 ， 不 仅 能 够 向 Web 浏览 器 提供 
数据 ， 而 且 可 以 在 客户 机 端 处 理 和 验证 数据 。 这 样 ，JavaScript 与 XHTML、CSS 共同 构成 
了 网 页 Web 标准 的 四 个 层次 。 


12.4.1 网 页 Web 标准 的 四 个 层次 


如 图 12-5 所 示 ， 网 页 Web 标准 包括 内 容 (Content) 、 结 构 (Structure ) 、 表 现 
(Presentation) 和 行为 (Behavior〉 四 个 层次 。 


|| 
TT 国生 


图 12-5 ”网 页 Web 标准 的 四 个 层次 


第 1 层次 是 内 容 。 内 容 是 指 通过 网 页 可 以 直接 展示 的 元 素 ， 包 括 文本 和 图 片 。 

第 2 层次 是 结构 。 结 构 反 映 了 网 页 中 内 容 ( 包 括 文本 和 图 片 ) 之 间 的 逻辑 关系 。 例 如 ， 
在 HIML 文档 中 ， 标 题 元 素 (hl、h2、h3、h4、h5 和 h6) 、 段 落 元 素 (p) 、 列 表 元 素 (ul 
和 Ti 元素) 和 表格 元 素 (table、caption、thead、tbody、 也 、tr 和 td) 就 能 够 反映 网 页 中 文 
本 内 容 之 间 的 逻辑 关系 。 

第 3 层次 是 表现 。 使 用 字体 (font-family) 、 大 小 (font-size) 、 粗 细 (font-weight) 、 
颜色 〈color) 、 字 符 间 距 (letter-spacing)〉 和 文本 对 齐 (text-align) 等 CSS 样式 特性 ， 能 
够 使 文本 和 图 片 等 内 容 在 网 页 中 “表现 ”出 特定 的 视觉 效果 。 










JavaScript 





XHTML 
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此 外 ， 网 页 布局 也 是 一 种 表现 。 例 如 ， 使 用 div+CSS 技术 可 以 将 整个 网 页 平面 从 上 到 
下 依次 划分 为 标志 、 横 幅 、 水 平 导航 条 、 主 要 内 容 和 底部 等 矩形 区 域 。“ 网 页 布局 ”这 种 
表现 构成 了 文本 和 图 片 内 容 之 间 的 平面 排列 关系 。 

第 4 层次 是 行为 。 行 为 是 指 网 页 浏览 者 与 Web 浏览 器 以 及 网 页 内 容 之 间 的 交互 及 操作 
效果 。 例 如 ， 使 用 JavaScript 可 以 处 理 和 验证 表单 数据 。 

在 设计 和 制作 Web 标准 网 页 时 ， 应 该 尽量 按照 “分 离 ” 原 则 将 “内 容 和 结构 ”“ 表 
现 ” 与 “行为 ”组 织 在 不 同类 型 的 文档 中 一 一 将 网 页 的 内 容 和 结构 保存 在 XHTML 文档 
中 ， 将 与 表现 有 关 的 样式 代码 保存 在 CSS 文档 的 外 部 样式 表 中 ， 而 将 体现 行为 的 
JavaScript 函数 及 其 代码 保存 在 外 部 脚本 文档 中 。 这 样 ，XHTML、CSS 和 JavaScript 也 就 
分 别 承 担 和 实现 了 相应 的 功能 一 XHTML 主要 用 来 组 织 网 页 的 内 容 和 结构 ，CSS 主要 用 
来 描述 网 页 的 表现 ， 而 JavaScript 则 是 专门 为 网 页 添加 行为 的 。 

但 XHTML、CSS 和 JavaScript 三 者 的 功能 存在 着 一 定 的 重 琶 。 首 先 ，XHTML 也 有 微 
弱 的 描述 表现 的 能 力 。 例 如 ， 在 XHTML 文档 中 也 可 以 使 用 行内 样式 和 内 部 样式 表 ; 又 
如 ， 在 XHTML 文档 中 ，em 和 strong 元 素 能 够 使 需要 强调 的 文本 内 容 表现 出 特定 的 视觉 
效果 。 其 次 ，CSS 也 有 一 定 的 响应 事件 的 行为 能 力 。 例 如 ， 如 果 在 类 型 选择 器 a 后 面 使 
用 :link、:visited、:hover 和 :active 四 个 伪 类 并 定义 相应 的 CSS 规则 ， 就 能 够 使 文本 超 链接 
对 鼠标 操作 做 出 相应 的 响应 。XHTML、CSS 和 JavaScript 三 者 的 功能 如 图 12-6 所 示 。 











XHTM CSS JavaScript 





图 12-6 XHTML、CSS 和 JavaScript 在 Web 标准 网 页 中 的 功能 


【 例 12-6】 按照 “分 离 ” 原 则 实现 【 例 12-5】 中 “电子 邮箱 ”的 必 填 项 验证 以 及 格式 
验证 。 单 击 “ 提 交 ” 按 钮 后 ， 验 证 “电子 邮箱 ”的 过 程 按照 【 例 12-5】 中 的 步骤 进行 。 此 
外 ， 参 照 图 12-7 和 【 例 12-2】 中 的 代码 ， 同 时 使 用 ul 和 下 元 素 以 及 div+CSS 对 表单 中 的 
控件 进行 布局 。 


/5 按照 “分离” 原则 实现 电子 信箱 的 必 选 项 纶 证 以 及 格式 验证 - 素 .. 车 ] 问 | 区 


SO 着 EWeb Paee\exer' 图 |#7|| XX| 图 百度 


了 疏 芒 严 | 砍 按 照 “ 分 离 ”原则 实现 电子 信箱 的 必 选 项 验证 






































* 电 子 邮箱 : 














12-7 ”使 用 ul 和 ii 元 素 以 及 div+CSS 布局 表单 控件 
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首先 ， 使 用 外 部 样式 表 描 述 网 页 的 “表现 ”。 为 此 ， 参 照 【 例 12-2】 中 的 代码 ， 在 
CSS 文档 〈12-6.css) 中 创建 外 部 样式 表 。CSS 文档 中 的 代码 如 下 : 


#container { width:500px; margin:0 auto; } 


#mainContent { width:480px; padding:10px; background-color:#CFF; } 


.formstyle { list-style:none; } 
.formstyle 1i { padding:10px Opx; } 


label { display:block; float:left; width:150px; padding-top:3px; 
text-align:right; } 

.SubmitDiv, .resetDiv { display:block; float:left; width:100px; padding: 

l0px 50px; } 

.submitDiv { text-align:right; } 

.resetDiv { text-align:left; } 


然后 ， 使 用 JavaScript 为 网 页 添加 “行为 ”。 为 此 ， 可 以 将 【 例 12-4】 中 的 JavaScript 
函数 validateRequired 以 及 【 例 12-5】 中 的 JavaScript 函数 validateEmail 和 validateFormData 
保存 在 外 部 脚本 文档 (12-6js) 中 。 

最 后 ， 将 网 页 的 “内 容 和 结构 ”保存 在 XHTML 文档 (12-6.htm) 中 。XHTML 文档 
中 的 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtml1/VDTD/Vxhtm1l1-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 按 照 “分离 ”原则 实现 电子 信箱 的 必 选 项 验证 以 及 格式 验证 </title> 
<link rel="stylesheet" type="text/css" href="12-6.css"> 
<script type="text/javascript" src="12-6.js"></script> 
</head> 
<body> 
<div id="container"> 
<div id="mainContent"> 
<form action="" onsubmit="return validateFormData (this)"> 
<ul class="formstyle"> 
<11> 
<label>* 电 子 邮 箱 : </label><input type="text" name="email"/> 
</1i> 
11> 
<div class="submitDiv"><input type="submit" value=" 提 交 "/></div> 
<div class="resetDiv"><input type="reset" value=" 重 置 "/></div> 
</1i> 
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</ul> 
</form> 
</div> 
</div> 
</body> 
</html> 


在 XHTML 文档 (12-6.htm) 头 部 ， 使 用 link 元 素 及 其 href 属性 可 以 链接 包含 外 部 样 
式 表 的 CSS 文档 (12-6.css)， 使 用 script 元 素 及 其 src 属性 可 以 指向 定义 有 JavaScript 函 
数 的 外 部 脚本 文档 (12-6js〉。 这 样 ， 当 Web 浏览 器 加 载 XHTML 文档 时 ， 既 能 够 加 载 
CSS 文档 中 的 外 部 样式 表 ， 又 可 以 加 载 外 部 脚本 文档 中 的 JavaScript 函数 及 其 中 的 语句 。 





12.4.2 ”Web 标准 系列 


实际 上 ， 网 页 的 Web 标准 也 是 一 系列 标准 的 集合 。 与 网 页 的 结构 、 表 现 和 行为 三 个 
层次 相对 应 ， 网 页 的 Web 标准 可 分 为 结构 标准 、 表 现 标准 和 行为 标准 三 类 。 结 构 标 准 主 
要 包括 XML 和 XHTML， 表 现 标 准 主要 包括 CSS， 行 为 标准 主要 包括 ECMAScript 和 
DOM 等 。 这 些 标准 大 都 是 由 W3C 起 草 和 发 布 的 。 下 面 简要 介绍 一 下 这 些 标准 。 

1. 结构 标准 

(1) XML。XML 是 Extensible Markup Language( 可 扩展 标记 语言 ) 的 缩写 。 目 前 推 
荐 遵循 的 是 W3C 于 2000 年 10 月 6 日 发 布 的 XML 1.0(Second Edition)。 和 HTML 一 样 ， 
XML 同样 来 源 于 SGML， 但 XML 是 一 种 能 定义 其 他 语言 的 语言 。 设 计 XML 的 最 初 目的 
是 弥补 HIML 的 不 足 ， 以 强大 的 扩展 性 满足 网 络 信息 发 布 的 需要 ， 后 来 XML 逐渐 用 于 网 
络 数据 的 描述 和 转换 。 

(2) XHTML。 有 目前 推荐 遵循 的 是 W3C 于 2002 年 8 月 1 日 修订 的 XHTML 1.0 (Second 
Edition) 。 虽 然 XML 的 数据 转换 能 力 强大 ， 并 有 望 取代 HTML， 但 面 对 数 以 亿 计 的 已 有 
站 点 和 网 页 ， 直 接 采 用 XML 还 为 时 过 早 。 因 此 ，W3C 在 HIML 4.0 的 基础 上 ， 参 照 XML 
的 规则 对 其 进行 扩展 ， 即 制订 了 XHTML 。 简 单 地 说 ， 建 立 XHTML 的 目的 就 是 实现 
HTML 向 XML 的 过 渡 。 

2. 表现 标准 

目前 推荐 遵循 的 是 W3C 于 2011 年 6 月 7 日 修订 的 CSS 2.1。 制 订 CSS 标准 的 目的 是 
以 CSS 取代 HIML 中 的 表现 性 元 素 、 表 现 性 属性 以 及 表格 式 布局 。XHTML 与 CSS 文档 
中 的 外 部 样式 表 相 结合 能 够 帮助 网 页 设计 者 将 “内 容 和 结构 ”与 “表现 ”进行 分 离 ， 同 时 
使 网 站 风格 更 加 统一 、 网 页 更 加 易于 维护 。 

3. 行为 标准 

(1) ECMAScript。ECMAScript 是 由 ECMA (European Computer Manufacturers Association ) 
制订 的 ，JavaScript 即 参照 和 遵循 ECMAScript。 目 前 推荐 遵循 的 是 ECMA 于 2011 年 6 月 
发 布 的 ECMAScript 262。 
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(2) DOM。DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 。W3C 制定 的 
DOM 标准 分 为 三 个 级 别 (Levels) 。 各 种 主流 Web 浏览 器 能 够 支持 DOM Level 1 和 DOM 
Level 2 中 的 大 部 分 功能 。 借 助 于 DOM，JavaScript 能 够 访问 和 修改 HIML 文档 的 内 容 、 
结构 和 表现 ， 进 而 使 网 页 中 的 文本 和 图 片 产生 “动态 变化 ”的 动画 和 视觉 效果 。 


(25 小 结 


表单 是 网 页 中 常见 的 要 素 。 通 过 表单 ，Web 浏览 器 可 以 接收 用 户 输 入 的 数据 ， 然 后 使 
用 JavaScript 对 表单 数据 进行 处 理 或 验证 其 有 效 性 。 

在 表单 中 ， 可 以 包括 文本 框 、 密 码 域 、 按 钮 、 提 交 按 钮 和 重 置 按钮 等 多 种 类 型 的 
控件 。 

表单 有 submit 和 reset 两 种 事件 。 单 击 提交 按钮 会 触发 提交 表单 事件 ， 单 击 重 置 按钮 
会 触发 重 置 表单 事件 。 

在 form 元 素 的 开始 标签 中 使 用 onsubmit 属性 值 ， 可 以 当 发 生 提 交 表 单 事件 时 通过 调 
用 JavaScript 函数 处 理 和 验证 表单 数据 。 之 后 ， 还 可 以 打开 由 form 元 素 的 action 属性 值 所 
指向 的 网 页 。 

当 发 生 重 置 表单 事件 时 ， 可 以 重 置 文本 框 和 密码 域 中 的 初始 值 。 

表单 数据 验证 主要 分 为 必 填 项 验证 和 格式 验证 两 种 。 

在 JavaScript 中 ， 可 以 将 表单 及 其 中 的 控件 看 作对 象 ， 它 们 都 拥有 属性 和 方法 。 

网 页 的 Web 标准 包括 内 容 、 结 构 、 表 现 和 行为 四 个 层次 。 

在 设计 和 制作 Web 标准 网 页 时 ， 应 该 尽量 按照 “分 离 ” 原 则 将 “内 容 和 结构 ”“ 表 
现 ” 与 “行为 ”组 织 在 不 同类 型 的 文档 中 一 一 将 网 页 的 内 容 和 结构 保存 在 XHTML 文档 
中 ， 将 与 表现 有 关 的 样式 代码 保存 在 CSS 文档 的 外 部 样式 表 中 ， 而 将 体现 行为 的 
JavaScript 函数 及 其 代码 保存 在 外 部 脚本 文档 中 。 


(2%8 习题 


1. 在 【 例 12-3】 中， 如 果 form 元 素 的 onsubmit 属性 值 是 JavaScript 代码 “contatenate 
Text (this.login_name.value,this.jpwd.value)”， 则 应 该 如 何 重新 定义 函数 contatenateText。 
通过 上 机 验证 重新 定义 的 函数 contatenateText 及 其 中 的 JavaScript 代码 。 

2. 按照 如 下 要 求 重 做 【 例 12-5】: 

(1) 将 函数 validateRequired 和 validateEmail 定义 在 外 部 脚本 文档 中 。 

(2) 将 函数 validateFormData 仍然 定义 在 XHTML 文档 中 。 

3， 画 出 【 例 12-5】 中 函数 validateFormData 对 应 的 程序 流程 图 ， 并 与 图 12-8 中 的 程 
序 流程 图 做 对 比 ， 然 后 根据 图 12-8 中 的 程序 流程 图 改写 函数 validateFormData 中 的 
JavaScript 代码 。 
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validateRequired( 电 子 邮箱 ) 没 通过 必 填 项 验证 














通过 必 填 项 验证 vy 
+ 警告 “必须 填写 电子 好 箱 1” 
validateEmail( 电 子 邮 箱 ) , 有 
na reVal<-false 





通过 格式 验证 「 警告“ 电子 邮箱 格式 无 次” ] 
reValetrue 








< 


返回 reVal 的 值 


图 12-8 修改 函数 validateFormData 的 程序 流程 图 











BOM 和 DOM | 


浏览 器 对 象 模型 (Browser Object Model，BOM) 和 文档 对 象 模型 (Document Object 
Model，DOM) 为 JavaScript 编程 提供 了 更 多 的 功能 。 在 JavaScript 中 使 用 BOM 提供 的 专 
门 对 象 可 以 与 Web 浏览 器 进行 交互 ， 而 DOM 则 使 得 JavaScript 对 HTML 文档 有 了 空前 的 
访问 和 处 理 能 力 。 


(3 浏览 器 对 象 模型 


BOM 提供 的 专门 对 象 主要 包括 window、navigator、document、screen 和 1]ocation 等 ， 
并 且 这 些 对 象 都 是 预先 声明 的 。 其 中 ，window 对 象 是 核心 ， 其 他 对 象 都 以 某 种 方式 与 
window 对 象 关联 。BOM 中 主要 对 象 之 间 的 关系 如 图 13-1 所 示 。 


Window 


人 


or document location 
forms anchors 


13-1 BOM 对 象 关系 图 







在 BOM 中 ，window 对 象 代表 Web 浏览 器 窗口 ， 但 不 包括 其 中 的 页 面 内 容 。 

在 Web 浏览 器 宿主 环境 中 ，window 对 象 是 JavaScript 的 全 局 对 象 ， 因 此 在 访问 
window 对 象 的 属性 或 通过 window 对 象 调用 方法 时 不 需要 特别 指明 window 对 象 。 例 如 ， 
在 JavaScript 中 经 常 使 用 的 alert 方法 实际 上 就 是 通过 window 对 象 调用 的 一 个 方法 ， 调 用 
该 方法 的 完整 的 JavaScript 代码 应 该 是 window.alert， 但 通常 在 JavaScript 代码 中 省 略 
window， 而 直接 写成 alert。 

访问 window 对 象 的 属性 或 通过 window 对 象 调用 方法 可 以 直接 对 Web 浏览 器 窗口 进 
行 操作 ， 同 时 实现 各 种 相应 的 功能 。 
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13.1.1 访问 window 对 象 的 属性 


实际 上 ,BOM 中 的 navigator、document、screen 和 location 等 对 象 就 是 window 对 和 象 的 
属性 ， 也 可 以 理解 为 window 对 象 包含 navigator、document、screen 和 location 等 对 象 。 此 
外 ， 使 用 window 对 象 的 status 属性 ， 可 以 设置 或 获取 在 Web 浏览 器 窗口 下 方 的 状态 栏 中 
显示 的 文字 。 


【 例 13-1】 window 对 象 的 属性 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 


<script type="text/javascript"> 





alert ("属性 navigator 的 类 型 : "+typeof window.navigator); 
alert ("属性 document 的 类 型 : "+typeof window.document); 
window.status=" 看 看 Web 浏览 器 窗口 下 方 的 状态 栏 中 有 哪些 文字 ? "; 
// 也 可 以 写 为 status=" 看 看 Web 浏览 器 窗口 下 方 的 状态 栏 中 有 哪些 文字 ? "; 
alert ("属性 status 的 类 型 : "+typeof window.status); 
alert ("属性 status 的 值 ， "+status) 7 

</script> 





13.1.2 通过 window 对 象 调用 的 方法 


通过 window 对 象 调用 方法 可 以 直接 对 Web 浏览 器 窗口 进行 多 种 操作 ， 同 时 实现 相应 
的 功能 。 根 据 功 能 的 不 同 ， 可 以 将 通过 window 对 象 调用 的 常用 方法 分 为 以 下 几 类 。 
1. 生成 模 态 对 话 框 
这 类 方法 包括 以 下 三 个 。 
(1) alert(message) 方 法 。 该 方法 用 于 显示 包含 一 条 指定 消息 和 一 个 “确定 ”按钮 的 警 
告 框 。 其 中 的 参数 message 是 用 于 指定 消息 的 字符 串 。 
(2) confirm(message) 方 法 。 该 方法 用 于 显示 包含 一 条 指定 消息 和 “确定 ”及 “取消 ” 
按钮 的 确认 框 。 其 中 的 参数 message 是 用 于 指定 消息 的 字符 串 。 
在 确认 框 中 ， 单 击 “ 确 定 ” 按 钮 ， 该 方法 返回 布尔 值 tue; 单 击 “ 取 消 ”按钮 ， 则 该 
方法 返回 布尔 值 false。 
【 例 13-2】 确认 框 和 警告 框 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 
<script type="text/javascript"> 
var reVal=confirm(" 当 前 是 确认 框 ， 单 击 下 方 的 其 中 一 个 按钮 ! "); 
if (reVal) alert(" 当 前 是 警告 框 ， 刚 才 你 在 确认 框 中 单 击 了 确认 按钮 ! ") ; 
else alert(" 当 前 是 警告 框 ， 刚 才 你 在 确认 框 中 单 击 了 取消 按钮 ! ") ; 
</script> 





注意 : 由 于 confirm 方法 返回 布尔 值 true 或 false， 因 此 变量 reVal 即 可 构成 寺 语 名 中 
的 条 件 。 

(3) prompt(message, defaultText) 方 法 。 该 方法 用 于 显示 一 个 提示 框 ， 其 中 包含 一 个 能 
够 接受 用 户 输 入 的 字符 串 的 文本 框 、 一 个 “确定 ”按钮 和 一 个 “取消 ”按钮 。 其 中 ， 参 数 
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message 是 显示 给 用 户 、 起 提示 作用 的 字符 串 ， 参 数 defaultText 是 文本 框 中 的 默认 字符 
串 。 在 提示 框 中 ， 单 击 “确定 ”按钮 ， 该 方法 返回 文本 框 中 的 字符 串 〈 可 能 是 空 字符 串 ); 
单 击 “ 取 消 ” 按 钮 ， 则 该 方法 返回 null。 
【 例 13-3】 提示 框 。HTML 文档 主体 中 的 JavaScript 代码 如 下 : 
<script type="text/javascript"> 
var name=prompt ("请 在 下 方 的 文本 框 中 输入 您 的 姓名 ", "比尔 - 盖 茨 ") 
if (name=="") document .write ("请 在 文本 框 中 输入 您 的 姓名 ! ") 
else document .write ("你 好 ,，"+name+"! ") 








</script> 


【思考 题 】 在 本 例 的 提示 框 中 ， 如 果 单 击 “ 取 消 ” 按 钮 ， 在 Web 浏览 器 窗口 中 会 显示 
什么 ? 为 什么 ? 


注意 ， 警 告 框 、 确 认 框 或 提示 框 等 属于 模 态 对 话 框 (Modal Dialog Box )， 且 具有 排他 
性 一 一 在 单 击 “ 确 定 ”或 “取消 ”按钮 、 关 闭 警告 框 、 确 认 框 或 提示 框 之 前 ， 将 阻止 用 户 
对 Web 浏览 器 的 其 他 任何 操作 。 因 此 ， 在 调用 alert、confirm 和 prompt 方法 时 ， 将 暂停 
JavaScript 的 执行 ， 直 至 关闭 警告 框 、 确 认 框 或 提示 框 。 

2. 打开 窗口 和 关闭 窗口 

这 类 方法 主要 包括 以 下 两 个 。 

(1) open(strUrl,strWindowName,[strWindowFeatures]) 方 法 。 该 方法 可 以 在 一 个 新 打开 
的 Web 浏览 器 窗口 (也 可 以 在 当前 Web 浏览 器 窗口 ) 中 显示 指定 的 网 页 。 各 参数 的 含义 
和 用 法 如 下 : 


。 strUrl 一 一 一 个 字符 串 ， 可 以 用 于 声明 将 要 显示 的 HTML 文档 的 URL， 例 如 ， 
"http://www.sina.com"。 如 果 该 参数 是 空 字符 串 ， 那 么 在 Web 浏览 器 窗口 中 不 会 显 
示 任 何 HTML 文档 。 

。 strWindowName 一 一 一 个 字符 串 ， 其 中 包括 数字 、 字 母 和 下 画 线 ， 可 以 用 于 声明 新 


打开 的 Web 浏览 器 窗口 的 名 称 。 也 可 以 是 blank 和 _self 等 具有 特殊 意义 的 窗口 名 
称 ， 其 中 _blank 表示 在 新 浏览 器 窗口 中 显示 目标 网 页 ，_self 表示 在 当前 浏览 器 窗口 
中 显示 目标 网 页 。 

strWindowFeatures 一 一 可 选 参数 ， 一 个 不 包含 任何 空白 字符 的 字符 串 ， 该 字符 串 是 
一 个 由 逗号 分 隔 的 特征 列表 ， 用 于 声明 Web 浏览 器 窗口 的 特征 。 例 如 ， 
“width=500,height=100” 表 示 Web 浏览 器 窗口 的 宽度 为 500px、 高 度 为 100px。 其 
他 常用 的 窗口 特征 及 其 声明 方法 如 下 : 
OO left 一 一 相对 于 屏幕 左上 角 ，Web 浏览 器 窗口 的 x 坐标 ， 以 像素 计 。 
@) top 一 一 相对 于 屏幕 左上 角 ，Web 浏览 器 窗口 的 y 坐标 ， 以 像素 计 。 
人) menubar 取 值 为 yes 或 no， 表 示 是 否 显示 菜单 栏 。 

@ toolbar 一 一 取 值 为 yes 或 no， 表 示 是 否 显示 工具 栏 。 

© location 取 值 为 yes 或 no， 表 示 是 否 显示 地 址 栏 。 

@ status 一 一 取 值 为 yes 或 no， 表示 是 否 显示 状态 栏 。 

@ resizable 一 一 取 值 为 yes 或 no， 表示 是 否 可 以 调整 窗口 的 尺寸 。 
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scrollbars 一 一 取 值 为 yes 或 no， 表 示 是 否 显示 水 平和 垂直 深 动 条 。 

如 果 省 略 整个 的 strWindowFeatures 参数 ，Web 浏览 器 窗口 将 具有 标准 特征 。 

当 在 一 个 新 打开 的 Web 浏览 器 窗口 中 显示 指定 网 页 时 , 该 方法 返回 指 代 新 打开 的 浏览 
器 窗口 的 window 对 象 ， 利 用 这 个 window 对 象 可 以 操作 新 打开 的 浏览 器 窗口 。 

(2) close() 方 法 。 该 方法 用 于 关闭 一 个 Web 浏览 器 窗口 。 

3. 定时 操作 

有 时 需要 利用 window 对 象 在 Web 浏览 器 窗口 中 进行 定时 操作 ， 其 目的 主要 有 两 个 。 
一 个 是 将 某 些 操作 延迟 一 段 时 间 后 再 执行 。 例 如 ， 打 开 某 些 网 站 的 首页 时 ， 会 同时 打开 一 
个 临时 的 广告 窗口 ， 广 告 窗口 会 在 儿 十 秒 钟 后 自动 关闭 ， 相 当 于 关闭 广告 窗口 的 操作 延迟 
几 十 秒 钟 后 再 执行 。 另 一 个 则 是 周期 性 执行 某 些 操作 。 例 如 ， 在 网 页 中 显示 时 钟 ， 需 要 每 
隔 一 秒 钟 更 新 一 次 时 间 的 显示 ; 又 如 在 网 页 上 漂浮 的 广告 图 片 ， 就 是 首先 让 广告 图 片 在 网 
页 上 的 某 个 位 置 静止 几 毫秒 ， 然 后 再 更 新 广告 图 片 在 网 页 上 的 位 置 ， 相 当 于 周期 性 更 新 
广告 图 片 在 Web 浏览 器 窗口 中 的 位 置 ， 这 样 即 可 产生 广告 图 片 在 网 页 上 漂浮 的 动画 
效果 。 

利用 window 对 象 进行 定时 操作 ， 可 以 调用 以 下 几 个 方法 。 

(1) setTimeout("code",millisec) 方 法 。 该 方法 用 于 设置 定时 器 ， 以 便 在 一 段 时 间 之 后 
执行 指定 的 JavaScript 代码 。 各 参数 的 含义 和 用 法 如 下 : 

。 code 一 一 指定 需要 执行 的 JavaScript 代码 。 可 以 是 简短 的 JavaScript 语句 ， 也 可 以 是 

调用 JavaScript 函数 的 语句 。 
。 millisec 一 一 在 执行 由 参数 code 指定 的 JavaScript 代码 之 前 需要 等 待 的 时 间 ， 以 毫 
秒 计 。 
setTimeout 方法 将 为 每 个 定时 器 分 配 一 个 唯一 的 ID 值 ， 且 返回 该 定时 器 的 ID 值 。 
注意 : setTimeout 方法 只 执行 由 参数 code 指定 的 JavaScript 代码 一 次 。 


【 例 13-4】 通 过 window 对 象 调用 open、close 和 setTimeout 方法 。HTML 文档 主体 中 
的 HTML 及 JavaScript 代码 如 下 : 
<p> 这 是 当前 的 Web 浏览 器 窗口 ! </p> 
<script type="text/javascript"> 
newWindow=window.open(""," blank","width=500,height=100") 
newWindow.document .write ("这 是 新 打开 的 web 浏览 器 窗口 ! ") 
newWindow.document .write ("这 个 新 打开 的 Web 浏览 器 窗口 会 在 20 秒 钟 之 后 自动 关闭 ! ") 
newWindow.setTimeout ("close()",20000) 
</script> 
以 上 JavaScript 代码 的 执行 过 程 如 下 : 首先 ， 在 打开 的 Web 浏览 器 窗口 中 显示 “这 是 
当前 的 Web 浏览 器 窗口 ! ”; 然后 ， 由 当前 Web 浏览 器 窗口 调用 open 方法 ， 可 以 打开 另 
一 个 新 的 Web 浏览 器 窗口 ， 接 着 ， 通 过 新 打开 的 Web 浏览 器 窗口 调用 write 方法 ， 并 在 新 
打开 的 Web 浏览 器 窗口 中 显示 两 个 write 方法 中 的 文字 ， 最 后 ， 通 过 新 打开 的 Web 浏览 器 
窗口 调用 setTimeout 方法 ， 在 20000 毫秒 后 调用 close 方法 关闭 自己 。 
【思考 题 】 在 本 例 的 open 方法 调用 中 ， 如 果 将 第 二 个 参数 由 _ blank 改 为 self， 会 出 现 
什么 情况 ? 为 什么 ? 
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(2) clearTimeout(id_of settimeout) 方 法 。 该 方法 用 于 清除 由 setTimeout 方法 设置 的 定 
时 器 。 其 中 的 参数 id_of settimeout 是 需要 清除 的 定时 器 的 ID 值 ， 该 了 D 值 是 之 前 的 某 个 
setTimeout 方法 的 返回 值 。 

(3) setInterval("code",millisec) 方 法 。 该 方法 用 于 设置 定时 器 ， 以 便 每 隔 一 段 时 间 周 期 
性 执行 指定 的 JavaScript 代码 。 各 参数 的 含义 和 用 法 如 下 : 

。 code 一 一 指定 需要 执行 的 JavaScript 代码 。 可 以 是 简短 的 JavaScript 语句 ,也 可 以 是 

调用 JavaScript 函数 的 语句 。 

。 millisec 一 一 周期 性 执行 由 参数 code 指定 的 JavaScript 代码 之 间 的 时 间 间 隔 , 以 毫秒 计 。 

setInterval 方法 将 为 每 个 定时 器 分 配 一 个 唯一 的 人 D 值 ， 且 返回 该 定时 器 的 ID 值 。 

(4) clearInterval(id_of setinterval) 方 法 。 该 方法 用 于 清除 由 setInterval 方法 设置 的 定 
时 器 。 其 中 的 参数 id_of setinterval 是 需要 清除 的 定时 器 的 ID 值 ， 该 ID 值 是 之 前 的 某 个 
setInterval 方法 的 返回 值 。 

注意 : setTimeout 和 setInterval 方法 的 区 别 在 于 ， 前 者 只 执行 由 参数 code 指定 的 
JavaScript 代码 一 次 ， 而 后 者 则 反复 地 执行 由 参数 code 指定 的 JavaScript 代码 ， 直 到 使 用 
clearInterval 方法 清除 由 setInterval 方法 设置 的 定时 器 或 关闭 Web 浏览 器 窗口 。 












































13.1.3 ”screen 对 象 


screen 对 象 用 于 访问 有 关 屏 幕 尺寸 的 各 种 数据 。 在 JavaScript 中 使 用 这 些 数据 可 以 实 
现 特殊 的 显示 要 求 。 例 如 ， 根 据 有 关 屏 幕 尺 寸 的 数据 将 新 打开 的 Web 浏览 器 窗口 定位 在 
屏幕 的 右 下 角 。screen 对 象 的 常见 属性 及 其 含义 如 下 : 

。 availHeight 一 一 屏幕 的 可 用 高 度 〈 除 Windows 任务 栏 之 外 )， 以 像素 计 。 

。 availWidth 一 一 屏幕 的 可 用 宽度 ， 以 像素 计 。 

。 height 一 一 屏幕 的 高 度 ， 以 像素 计 。 

。 width 一 一 屏幕 的 宽度 ， 以 像素 计 。 

正常 情况 下 ， 屏 幕 的 高 度 Cheight) 大 于 屏幕 的 可 用 高 度 (availHeight) ， 而 屏幕 的 宽 
度 (width) 则 等 于 屏幕 的 可 用 宽度 (availWidth) 。 


(3> 文档 对 象 模型 及 HTML 文档 树 


与 BOM 不 同 ,文档 对 象 模型 (Document Object Model，DOM) 定义 了 访问 和 处 理 
HTML 文档 的 标准 接口 和 方法 ， 使 得 JavaScript 对 HTML 文档 有 了 空前 的 访问 和 处 理 能 
力 。 基 于 DOM，JavaScript 可 以 对 HTML 元 素 进行 深层 次 操作 一 一 或 者 修改 HTML 元 素 
的 内 容 ， 或 者 修改 HTML 元 素 的 属性 。 


13.2.1 文档 对 象 模型 





在 DOM 中 ，HTML 文档 的 每 个 成 分 都 被 看 作 一 个 节点 (Node) 。DOM 规定 : 
(1) 整个 HTML 文档 对 应 一 个 文档 节点 (Document Node) 。 
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(2) 每 个 HTML 元 素 是 一 个 元 素 节点 (Element Node) 。 
(3) HTML 元 素 的 每 个 属性 是 一 个 属性 节点 (Attribute Node) 。 
(4) 包含 在 HIML 元 素 中 的 文本 称 为 文本 节点 (Text Node) 。 
(5) 注释 属于 注释 节点 (Comment Node) 。 
此 外 ， 在 DOM 中 ，HTML 文档 的 所 有 节点 构成 了 一 个 HTML 文档 树 ( 也 称 HTML 
节点 树 ) 。 例 如 ， 以 下 HTML 代码 : 
<htm1> 
<head> 
<title> 文 档 标 题 </title> 
</head> 
<body> 
<a href="#"> 文 本 链接 </a> 
<h1> 一 级 标题 </h1> 
</body> 
</html> 


对 应 于 图 13-2 中 的 HTML 文档 树 。 
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图 13-2 HTML 文档 树 

HTML 文档 及 其 中 的 每 个 元 素 、 属 性 、 文 本 和 注释 等 都 对 应 着 HTML 文档 树 中 的 一 
个 节点 。HTML 文档 树 起 始 于 文档 节点 〈Document Node) ， 并 由 此 继续 向 下 伸 出 枝条 ， 
直到 HIML 文档 树 中 级 别 最 低 的 节点 为 止 。 

在 HTML 文档 树 中 ， 每 个 节点 处 于 不 同 的 层次 和 位 置 ， 并 且 其 中 的 某 些 节点 彼此 间 
存在 一 定 的 关系 。 

除 文档 节点 document 外 ， 每 个 节点 都 有 一 个 唯一 的 父 节 点 (Parent)。 例 如 ， 在 图 13-2 
的 HTML 文档 树 中 ，html 元 素 节点 的 父 节 点 是 文档 节点 document，head 和 body 两 个 元 素 
节点 的 父 节 点 是 html 元 素 节点 ， 文 本 节点 “文档 标题 ”的 父 节 点 是 title 元 素 节 点 。 

除 br 等 某 些 空 元 素 节点 外 ， 大 部 分 元 素 节点 都 会 有 子 节点 (Child) 。 例 如 ， 在 图 13-2 








的 HIML 文档 树 中 ，head 元 素 节点 有 一 个 子 节点 ， 即 title 元 素 节点 ;hl 元 素 节点 也 有 一 
个 子 节点 ， 即 文本 节点 “一 级 标题 ”; 而 body 元 素 节 点 则 有 两 个 子 节点 : 一 个 是 a 元 素 节 


点 ， 男 一 个 是 hl 元 素 节点 。 
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当 几 个 节点 共享 同一 个 父 节点 时 ， 它 们 就 是 同辈 (Sibling)。 例 如 ， 在 图 13-2 的 HIML 
文档 树 中 ，a 和 hl 两 个 元 素 节点 就 是 同辈 ， 因 为 它们 的 父 节点 均 是 body 元 素 节点 。 

一 个 节点 也 可 以 拥有 后 代 (Descendant) ， 后 代 指 某 个 节点 的 所 有 子 节点 ， 或 者 这 些 
子 节点 的 子 节点 ， 以 此 类 推 。 例 如 ， 在 图 13-2 的 HTML 文档 树 中 ， 所 有 的 文本 节点 都 是 
html 元 素 节点 的 后 代 ， 而 文本 节点 “文档 标题 ”也 是 head 元 素 节点 的 后 代 。 

一 个 节点 还 可 以 拥有 先辈 〈Ancestor) ， 先 辈 指 某 个 节点 的 父 节点 ， 或 者 这 些 父 节点 
的 父 节点 ， 以 此 类 推 。 例 如 ， 在 图 13-2 的 HTML 文档 树 中 ， 所 有 的 文本 节点 都 可 把 html 
元 素 节点 作为 先辈 。 

在 JavaScript 中 ，HTML 文档 树 的 文档 节点 document 以 及 每 个 元 素 节点 都 被 看 作 一 个 
对 象 。 文 档 节点 document 对 应 的 对 象 称 为 document 对 象 ， 元 素 节点 对 应 的 对 象 称 为 元 素 
对 象 。document 对 象 和 元 素 对 象 都 拥有 属性 ， 通 过 document 对 象 和 元 素 对 象 可 以 调用 相 
应 的 方法 。 


13.2.2 ”使 用 innerHTML 属性 和 innerText 属性 访问 元 素 的 内 容 





对 应 于 HTML 文档 树 中 的 元 素 节点 ， 每 个 元 素 对 象 都 拥有 innerHTML 属性 ， 该 属性 
值 是 一 个 字符 串 。 对 于 br、img 等 空 元 素 对 象 ，innerHTML 属性 值 是 空 字符 串 ， 即 "。 而 
对 于 非 空 元 素 对 象 ，innerHTML 属性 值 是 位 于 元 素 的 开始 标签 和 结束 标签 之 间 的 HTML 
代码 。 例 如 ， 对 于 以 下 HIML 代码 

<p id="p1"> 这 是 一 个 段落 </p> 

<div id="d2"> 这 是 一 个 <strong> 块 </strong></div> 
P 元 素 对 象 的 innerHTML 属性 值 就 是 “这 是 一 个 段落 ”， 而 div 元 素 对 象 的 innerHTML 属性 
值 就 应 该 是 “这 是 一 个 <strong> 块 </strong>”。 

除 innerHTML 属性 外 ， 对 应 于 HTML 文档 树 中 的 元 素 节点 ， 每 个 元 素 对 象 还 拥有 
innerText 属性 ， 该 属性 值 也 是 一 个 字符 串 。 对 于 br、img 等 空 元 素 对 象 ，innerText 属性 值 
是 空 字符 串 ， 即 ""。 而 对 于 非 空 元 素 对 象 ，innerText 属性 值 是 位 于 该 元 素 的 开始 标签 和 结 
束 标签 之 间 ， 但 剔除 其 中 后 代 元 素 的 开始 标签 和 结束 标签 的 文本 内 容 。 例 如 ， 对 于 以 下 
HTML 代码 

<p id="pl"> 这 是 一 个 段落 </p> 

<div id="d2"> 这 是 一 个 <strong> 块 </strong></div> 
Pp 元 素 对 象 的 innerText 属性 值 就 是 “这 是 一 个 段落 ”， 而 div 元 素 对 象 的 innerText 属性 值 
就 应 该 是 “这 是 一 个 块 ”。 

注意 : 元 素 的 属性 和 元 素 对 象 的 属性 是 两 个 不 同 的 概念 。 元 素 的 属性 出 现在 HTML 
文档 中 某 个 元 素 的 开始 标签 内 ， 而 元 素 对 象 的 属性 是 指 HIML 文档 树 中 某 个 元 素 节点 (对 
象 ) 所 具有 的 属性 。 


13.2.3 调用 getElementByld 方法 访问 HTML 文档 树 中 的 元 素 节点 


在 HIML 文档 中 某 个 元 素 的 开始 标签 内 使 用 id 属性 及 属性 值 可 以 唯一 地 标识 该 元 
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素 。 因 此 ， 对 于 指定 的 id 属性 值 ， 在 HIML 文档 中 只 可 能 存在 唯一 的 具有 该 id 属性 值 的 
元 素 。 而 通过 document 对 和 象 调用 getElementById 方法 ， 即 可 根据 指定 的 id 属性 值 返回 
HTML 文档 树 中 唯一 的 具有 该 id 属性 值 的 元 素 节点 ， 无 论 这 个 元 素 节点 位 于 HTML 文档 
树 中 的 任何 位 置 。 

调用 getElementById 方法 的 具体 语法 为 : 


document .getElementById ("id of element"); 


其 中 的 参数 id_of_element 是 某 个 HTML 元 素 在 其 开始 标签 中 的 记 属性 值 ， 该 方法 返回 
HTML 文档 树 中 唯一 一 个 id 属性 值 为 id_of element 的 元 素 节点 〈 对 象 ) 。 因 此 ， 该 方法 
的 返回 值 属于 object 类 型 。 
【 例 13-S】 调用 getElementById 方法 ， 并 使 用 innerHTML 属性 以 及 innerText 属性 获 
取 和 设置 元 素 的 内 容 。HTML 文档 主体 中 的 HTML 及 JavaScript 代码 如 下 : 
<p id="pl"> 这 是 一 个 段落 </p> 
<div id="d2"> 这 是 一 个 <strong> 块 </strong></div> 
<script type="text/javascript"> 
Var pElement=document .getElementById ("pl1"); 
alert ("变量 pElement 的 类 型 是 : "+ (typeof pElement)); 
alert ("p 元 素 对 象 的 innerHTML 属性 值 是 : "+pElement .innerHTML); 
alert ("p 元 素 对 象 的 innerText 属性 值 是 : "+pElement .innerText); 





























divElement=document .getElementById("d2"); 
alert ("div 元 素 对 象 的 innerHTML 属性 值 是 : "+divElement .innerHTML); 
alert ("div 元 素 对 象 的 innerText 属性 值 是 : "+divElement .innerText); 


var reVal=confirm(" 是 否 改变 div 元 素 的 内 容 ? "); 
if (reVal) divElement .innerHTML=" 这 是 一 个 块 " 


</script> 

注意 ; 

GD getElementById 方法 的 返回 值 属 于 object 类 型 ， 因 此 变量 pElement 或 divElement 
可 以 指向 一 个 元 素 对 象 ， 该 元 素 对 象 又 对 应 于 HTML 文档 树 中 的 一 个 元 素 节点 。 


@@ 由 于 confimm 方法 返回 布尔 值 tue 或 false， 因 此 变量 reVal 即 可 构成 让 语句 中 的 条 件 。 
【 例 13-6】 使 用 setInterval 方法 实现 时 钟 。HTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0rg/TR/xhtmll1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 使 用 setInterval 方法 实现 时 钟 </title> 
<script type="text/Javascript"> 
function displayTime() { 
/ /根据 元 素 id 获取 元 素 
Var aElement=document .getElementById ("clock"); 


// 使 用 Date 对 象 的 toLocalestring 方法 将 时 间 转 换 成 当地 格式 
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Var timestring=(new Date () ) .toLocalestring(); 
// 将 时 间 显 示 在 aElement 元 素 的 内 部 
aElement .innerHTML=timeStringy7 
} 
</script> 
</head> 
<body> 
<div id="clock"></div> 
<script type="text/JavaScript"> 
// 每 隔 5 秒 显示 一 次 时 间 
window.setInterval("displayTime ()",5000); 
</script> 
</body> 
</html> 


注意 : 代码 window.setInterval("displayTime()",5000) 设 置 了 一 个 定时 器 ， 该 定时 器 能 
够 控制 每 隔 5 秒 钟 调用 一 次 displayTime 函数 ， 但 第 1 次 调用 displayTime 函数 是 在 5 秒 钟 
之 后 。 所 以 ， 使 用 Web 浏览 器 打开 该 XHTML 文档 后 ， 需 要 过 5 秒 钟 才 会 在 网 页 上 第 1 次 
显示 时 间 。 


在 getElementById 方法 和 innerHTML 属性 的 基础 上 ， 结 合 使 用 window 对 象 的 
setInterval 和 clearInterval 方法 ， 可 以 在 网 页 上 使 显示 的 字符 串 产生 一 种 “打字 效果 ”一 一 
每 次 仅 多 显示 一 个 字符 。 

【 例 13-7】 打字 效果 的 字符 串 〈 仅 显示 一 次 ) 。XHTML 及 JavaScript 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 


<htm1l xmlns="http://www.w3.0rg/1999/zxhtml"> 
<head> 





<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 打 字 效 果 的 字符 串 ( 仅 显示 一 次 ) </title> 
<script type="text/javascript"> 
function displayTextString() { 
if (charNum <= textstring.length) { 
txt=textSstring.substr (0, charNum++); 
document .getElementById ("idForTextString") .innerText=txt; 
. 
else clearInterval (timerID); 
} 
</script> 
</head> 
<body onunload="clearInterval (timerID);"> 
<div id="idForTextstring"></div> 
<script type="text/javascript"> 
var textString=" 打 字 效 果 的 字符 串 "7 
Var charNum=17 // 每 次 显示 的 字符 数 
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var timerID; // 定 时 器 ID 
var speed=1000;  // 控 制 打 字 的 速度 


timerID=setInterval ("displayTextSstring()", speed); 
</script> 
</body> 
</html> 


注意 : 

@ 由 setInterval 方法 设置 的 定时 器 将 一 直 起 作用 ， 直 至 使 用 clearInterval 方法 清除 该 
定时 器 (或 关闭 Web 浏览 器 窗口 ) 。 因 此 ， 如 果 不 再 需要 Interval 定时 器 ， 就 应 该 及 时 使 
用 clearInterval 方法 清除 Interval 定时 器 ， 这 样 可 以 防止 Interval 定时 器 占用 不 必要 的 内 存 
和 CPU 资源 。 

@ 在 displayTextString 函数 中 ， 如 果 去 掉 让 语句 中 的 else 部 分 ，displayTextString 函 
数 将 在 Interval 定时 器 的 控制 下 周期 性 被 调用 ， 直 至 关闭 Web 浏览 器 窗口 。 


13.2.4 调用 getElementsByTagName 方法 访问 HTML 文档 树 中 的 
元 素 节 点 


除 getElementById 方法 外 ， 通 过 document 对 象 还 可 以 调用 getElementsByTagName 方 
法 ， 以 访问 HIML 文档 树 中 一 组 同名 的 元 素 节点 〈 对 象 ) 。 

调用 getElementsByTagName 方法 的 具体 语法 为 : 

document .getElementsByTagName ("element name"); 


其 中 的 参数 element_name 是 某 个 HTML 元 素 的 名 称 ， 该 方法 返回 HTML 文档 树 中 名 称 为 
element_name 的 所 有 元 素 节点 (对 象 ) 的 集合 。 因 此 ， 该 方法 的 返回 值 是 一 个 包含 一 组 元 
素 对 象 的 数组 ， 是 一 个 Array 对 象 ， 属 于 object 类 型 。 

【 例 13-8】 调用 getElementsByTagName 方法 访问 HIML 文档 树 中 的 一 组 元 素 节点 。 
XHTML、CSS 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 

<style type="text/css"> 

-newImg { padding-left:35px; background-image:url ("new.gif"); 
background-repeat:no-repeat; color:red; } 

</style> 

<title> 使 用 getElementsByTagName 方法 访问 元 素 节 点 </title> 
</head> 
<body> 

<p id="New-20180101">Web 标准 网 页 设计 原理 与 前 端 开发 技术 </p> 

<p id="New-20160501">Java 程序 设计 基础 </p> 
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<p>Web 标准 网 页 设计 原理 与 制作 技术 </p> 
<p>SQL Server 2005 数据 库 技术 与 应 用 实用 教程 </p> 


<script type="text/javascript"> 
// 假 设 recentVisitDate 是 上 次 页 面 访问 日 期 
//Date (2016,4,11) 表 示 2016 年 5 月 11 日 
Var FrecentVisitDate=new Date (2016,4,11) 


Var allPs=document .getElementsByTagName ("p"); 
for (var i=0;i<allPs.length;i++) { 
if (allPs[il].id.indexOf ("New-")!=-1) { 
var yyyy=parseInt (allPs[i].id.substring(4,8)); 
Var mm=parseInt (allPs [i].id.substring(8,10)); 
var dd=parseInt (allPs [i].id.substring(10,12)); 
Var publicationDate=new Date (yyyy,mm-1,dd); 
if (publicationDate.getTime()>recentVisitDate.getTime()) 
allPs[i].className+="newImg"; 
} 
} 
</script> 
</body> 
</html> 


在 XHTML 文档 头 部 定义 了 将 作用 于 某 些 p 元 素 的 CSS 类 选择 器 〈.newImg) ， 该 类 
选择 器 将 在 段落 内 容 的 左 侧 添加 35 像素 的 填充 ， 将 图 像 (new.gif) 放 在 背景 中 , 但 该 图 像 
在 背景 中 只 出 现 一 次 。 由 于 35 像素 的 左 填充 可 以 确保 段落 左 侧 是 空白 的 ， 所 以 这 个 背景 
图 像 看 起 来 只 是 位 于 段落 左 侧 的 一 个 图 标 。 此 外 ， 该 类 选择 器 将 段落 内 文本 的 颜色 设置 为 
红色 。 

在 XHTML 文档 的 主体 使 用 四 个 p 元 素 定义 了 四 个 段落 ， 每 个 段落 内 的 文本 各 代表 一 
个 书 名 。 此 外 ， 在 前 两 个 p 元 素 的 开始 标签 中 使 用 了 id 属性 ，id 属 性 值 中 的 最 后 八 个 字符 

表示 一 本 新 书 的 出 版 日 期 。 例 如 ， 代 码 “<p id="New-20160501">Java 程序 设计 基础 
</p>” 表 示 新 书 《Java 程序 设计 基础 》 的 出 版 日 期 是 2016 年 5 月 1 日 。 

在 XHTML 文档 主体 的 JavaScript 中 ， 首 先 创建 了 Date 对 象 recentVisitDate， 以 表示 
用 户 上 次 访问 该 页 面 的 日 期 。 然 后 通过 document 对 象 调用 getElementsByTagName 方法 获 
取 了 XHTML 文档 主体 中 的 四 个 p 元 素 ， 并 将 这 四 个 p 元 素 保存 于 Array 对 象 alPs 中 。 

在 for 循环 中 ， 对 Array 对 象 allPs 中 的 每 个 p 元素 依次 进行 访问 。 

关系 表达 式 “allPs[i].id.indexOf("New-")!=-1” 用 来 判断 在 第 itl 个 p 元 素 ( 即 allPs[i]) 
的 id 属性 值 中 是 否 出 现 字符 串 “New-”。 如 果 字 符 串 “New-” 出 现在 id 属性 值 中 ， 该 关 
系 表达 式 的 值 为 tue， 表 示 该 p 元 素 内 容 中 的 文本 是 一 本 新 书 的 书 名 ， 并 将 执行 以 下 
操作 。 

相对 于 出 现 字符 串 “New-” 的 p 元 素 的 id 属 性 值 ， 代 码 “allPs[i].id.substring(4,8)” 表 
示 新 书 出 版 日 期 中 的 “年 ”字符 串 ， 调 用 parseInt 方法 可 以 将 “年 ”字符 串 转 换 为 整数 、 
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并 将 该 整数 存储 于 变量 yyyy。 类 似 地 ， 变 量 mm 和 dd 分 别 存储 新 书 出 版 日 期 中 的 “月 ” 
和 “日 ”。 然 后 使 用 变量 yyyy、mm 和 dd 中 的 “年 ”“ 月 ”和 “日 ”数据 创建 Date 对 象 
publicationDate。 

如 果 新 书 的 “出 版 日 期 ” 晚 于 “上 次 页 面 访问 日 期 ”， 则 关系 表达 式 publicationDate. 
getTime()>recentVisitDate.getTime() 的 值 为 tue， 并 通过 代码 allPs[i].className+="newImeg" 
在 p 元 素 上 应 用 类 选择 器 〈.newImg) 及 其 中 的 样式 。 在 本 例 中 ， 由 于 《Web 标准 网 页 设 
计 原 理 与 前 端 开发 技术 》 一 书 的 “出 版 日 期 ” 晚 于 “上 次 页 面 访问 日 期 ”， 所 以 在 网 页 文 
本 “Web 标准 网 页 设计 原理 与 前 端 开发 技术 ”的 前 面 会 出 现 一 个 “new!” 图 标 ， 并 以 红色 
字体 显示 书 名 ， 如 图 13-3 所 示 。 
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图 13-3 在 新 书 前 添加 “new!” 图 标 











注意 : 

@ 不 仅 getElementsByTagName 方法 返回 的 数组 属于 object 类 型 ， 而 且 该 数组 中 的 每 
个 元 素 对 象 也 属于 object 类 型 。 因 此 ， 上 述 代 码 中 的 allPs 指 代 一 个 Array 对 象 ，allPs[j] 指 
代 HTML 文档 树 中 的 一 个 p 元 素 节 点 。 

@ 使 用 JavaScript 可 以 在 HTML 元 素 的 开始 标签 中 添加 属性 及 其 相关 联 的 值 。 在 本 
例 中 ， 代 码 allPs[i].className+="newImg" 能 够 在 第 1 个 p 元 素 的 开始 标签 中 添加 了 代码 
class="newImg"。 这 样 ， 第 1 个 p 元 素 的 开始 标签 的 完整 代码 就 变 为 <p id="New-20160501" 
class="newImg">。 所 以 ， 在 网 页 文本 “Web 标准 网 页 设计 原理 与 前 端 开发 技术 ”的 前 面 
会 出 现 一 个 “new!” 图 标 。 


(33 事件 及 其 处 理 





事件 (Event) 是 JavaScript 和 DOM 之 间 进 行 交互 的 桥梁 。 当 某 个 事件 发 生 时 ， 可 以 
通过 调用 对 应 的 事件 处 理 函 数 (Event Handler) 执行 特定 的 JavaScript 代码 。 例 如 ，Web 
浏览 器 加 载 HTML 文档 完毕 时 ， 会 触发 load 事件 ， 当 单 击 元 素 的 内 容 时 ， 会 触发 click 事 
件 。 通 过 在 对 应 的 事件 处 理 函 数 中 使 用 JavaScript， 可 以 实现 对 事件 的 响应 ， 如 弹出 一 个 
警告 框 并 在 其 中 给 出 提示 信息 。 


13.3.1 事件 的 类 型 


根据 事件 的 来 源 或 触发 事件 的 原因 ， 可 以 将 与 JavaScript 编程 有 关 的 常见 事件 分 为 窗 
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口 事 件 、 表 单 事件 、 鼠 标 事件 和 键盘 事件 四 种 类 型 。 表 13-1 列 出 了 这 些 事件 、 与 事件 关 
































联 的 元 素 及 属性 。 
表 13-1 事件 、 与 事件 关联 的 元 素 及 属性 

事件 分 类 事件 描述 典型 的 关联 元 素 相关 属性 
Web 浏览 器 加 载 HTML 文档 body ‘onload 

窗口 事件 | Web 浏览 器 卸载 HTML 文档 。 | body ee 
改变 Web 浏览 器 窗口 大 小 bod onresize 
提交 表单 form onsubmit 
重 置 表单 form onreset 

表单 事件 选取 元 素 input onselect 
元 素 值 发 生 改变 input onchange 
元 素 获得 焦点 input onfocus 
元 素 失去 焦点 input onblur 
按 下 鼠标 input、div、span 等 大 多 数 元 素 onmousedown 
松 开 鼠标 input、div、span 等 大 多 数 元 素 onmouseup 
单 击 鼠 标 input、div、span 等 大 多 数 元 素 onclick 

鼠标 事件 双击 鼠标 input、div、span 等 大 多 数 元 素 ondblclick 
鼠标 指针 悬 停 在 元 素 上 input、div、span 等 大 多 数 元 素 onmouseover 
鼠标 指针 移出 元 素 input、div、span 等 大 多 数 元 素 onmouseout 
移动 鼠标 指针 input、div、span 等 大 多 数 元 素 onmousemove 
按 下 键盘 input、div、span 等 大 多 数 元 素 onkeydown 

键盘 事件 | 松 开 键盘 input、div、span 等 大 多 数 元 素 onkeyup 
按 下 键盘 后 又 松 开 键盘 input、div、span 等 大 多 数 元 素 onkeypress 


从 表 13-1 可 知 ， 在 HTML 文档 及 JavaScript 中 ， 
联 ， 而 且 还 要 与 该 HTML 元 素 的 特定 属性 联系 在 一 起 。 例 如 ， 


-个 事件 可 以 与 某 个 HTML 元 素 关 
“Web 浏览 器 加 载 HTML 


文档 ”事件 不 仅 与 body 元 素 关 联 ， 而 且 还 要 与 body 元 素 的 onload 属性 联系 在 一 起 。 又 
如 ，“ 单 击 鼠 标 ” 事 件 不 仅 可 以 与 某 个 div 元 素 关 联 ， 而 且 还 要 与 这 个 div 元 素 的 onclick 








13.3.2 在 HTML 元 素 的 开始 标签 中 处 理事 件 


在 HIML 元 素 的 开始 标签 中 ， 可 以 通过 相关 属性 值 执行 JavaScript 语句 或 调用 事件 处 
理 函 数 ， 以 完成 相应 的 事件 处 理 任务 。 


【 例 13-9】 在 HIML 元 素 的 玫 





F 始 标签 中 处 理事 件 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 


"http://www.w3.0org/TR/xhtmll1/DTD/zxhtmll-strict.dtd"> 


<html xmlns="http://www.w3.0rg/1999/zxhtml"> 


0 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 在 HTML 元 素 的 开始 标签 中 处 理事 件 </title> 
<script type="text/javascript"> 
function unloadEventHandler() { alert ("unload 事件 被 触发 ! "); } 
function clickEventHandler() { alert ("click 事件 被 触发 ! "); } 
</script> 
</head> 
<body onload="alert ('lo0ad 事件 被 触发 ! ') ;" onunload="unloadEventHandler ();"> 
<div onclick="clickEventHandler ();"> 用 鼠标 单 击 此 处 </div> 
</body> 
</html> 


在 XHTML 文档 头 部 定义 了 unloadEventHandler 和 clickEventHandler 两 个 函数 。 

上 述 XHTML 及 JavaScript 代码 涉及 三 个 事件 。 

(1) “Web 浏览 器 加 载 HTML 文档 ”窗口 事件 。 该 事件 与 body 元 素 及 其 onload 属性 
关联 。 这 样 ， 当 “Web 浏览 器 加 载 HTML 文档 ”时 ，onload 属性 值 中 的 JavaScript 语句 
alert(load 事件 被 触发 ! ) 就 会 被 直接 执行 ， 并 弹出 一 个 警告 框 。 

(2) 单 击 鼠标 事件 。 该 事件 与 div 元 素 及 其 onclick 属性 关联 ， 而 且 onclick 属性 值 是 
函数 调用 语句 clickEventHandler()。 这 样 ， 当 用 鼠标 单 击 div 元 素 的 文本 内 容 “ 用 鼠标 单 
击 此 处 ”时 ， 就 会 调用 相应 的 事件 处 理 函数 一 clickEventHandler 函数 ， 并 弹出 一 个 警 
告 框 。 

(3) “Web 浏览 器 卸载 HTML 文档 ”窗口 事件 。 该 事件 与 body 元 素 及 其 onunload 属 
性 关联 ， 而 且 onunload 属 性 值 是 函数 调用 语句 unloadEventHandler()。 这 样 ， 当 “Web 浏 览 
器 外 载 HTML 文档 ”时 ， 就 会 调用 相应 的 事件 处 理 函数 一 一 unloadEventHandler 函数 ， 并 
弹出 一 个 警告 框 。 


注意 : 对 于 不 同 厂商 或 同一 厂商 不 同 版 本 的 Web 浏览 器 ， 触 发 “地 载 HTML 文档 ” 
事件 的 具体 操作 会 有 所 差异 一 一 可 能 是 刷新 网 页 ， 也 可 能 是 关闭 Web 浏览 器 ， 还 可 能 是 
在 地 址 栏 中 键入 新 的 URL. 


13.3.3 ”使 用 对 象 及 有 关 属 性 处 理事 件 





在 DOM 中 ，HTML 文档 树 的 每 个 元 素 节 点 都 被 看 作 一 个 对 象 ， 每 个 元 素 对 象 可 以 拥 
有 属性 。 在 JavaScript 编程 中 ， 可 以 使 用 元 素 对 象 及 有 关 属 性 处 理 鼠 标 和 键盘 事件 。 此 
外 ， 也 可 以 使 用 BOM 中 的 window 对 象 及 有 关 属 性 处 理 窗口 事件 。 
【 例 13-10】 使 用 对 象 及 有 关 属 性 处 理事 件 。XHTML 及 JavaScript 代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 


<html] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 





<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 


第 13 章 BOM 和 DOM 05 


<title> 使 用 对 象 及 有 关 属 性 处 理事 件 </title> 

<script type="text/javascript"> 
// 先 定义 函数 1oadEventHandler， 然 后 将 该 函数 赋值 给 window 对 象 的 onload 属性 
function loadEventHandler() { alert ("load 事件 被 触发 ! "); } 


window.onload=loadEventHandler; 


// 将 匿名 函数 赋值 给 window 对 象 的 onunload 属性 
window.onunload=function() { alert ("unload 事件 被 触发 ! "); } 
</script> 
</head> 
<body> 
<div id="myDiv"> 用 鼠标 单 击 此 处 </div> 
<script type="text/javascript"> 
var divElement=document .getElementById ("myDiv"); 
// 将 匿名 函数 赋值 给 div 元 素 对 象 的 onclick 属性 
divElement .onclick=function() { alert ("click 事件 被 触发 ! ") }; 
</script> 
</body> 
</html> 


与 【 例 13-9】 类 似 ， 上 述 XHTML 及 JavaScript 代码 涉及 了 三 个 相同 的 事件 ， 但 事件 
处 理 方式 有 所 不 同 。 

(1) “Web 浏览 器 加 载 HIML 文档 ”窗口 事件 。 在 XHTML 文档 头 部 定义 了 
loadEventHandler 函数 ， 并 将 该 函数 赋值 给 window 对 象 的 onload 属性 。 这 样 ， 当 “Web 
浏览 器 加 载 HTML 文档 ”时 ， 就 会 调用 loadEventHandler 函数 ， 并 弹出 一 个 警告 框 。 

(2) 单 击 鼠标 事件 。 在 XHTML 文档 主体 的 JavaScript 中 ， 首 先 通 过 document 对 象 
调用 getElementById 方法 从 HTML 文档 树 中 获取 id 属性 值 为 myDiv 的 div 元 素 对 象 ， 并 
将 该 对 象 赋值 给 object 类 型 的 变量 divElement; 然后 通过 变量 divElement 直接 将 一 个 函数 
及 其 定义 赋值 给 div 元 素 对 象 的 onclick 属性 。 这 样 ， 当 用 鼠标 单 击 div 元 素 的 文本 内 容 

“用 鼠标 单 击 此 处 ”时 ， 就 会 调用 相应 的 事件 处 理 函数 〈 且 该 函数 是 一 个 匿名 函数 ) ， 并 
弹出 一 个 警告 框 。 

(3)“Web 浏览 器 和 卸载 HIML 文档 ”窗口 事件 。 在 XHTML 文档 头 部 , 直接 将 匿名 函 
数 及 其 定义 赋值 给 window 对 象 的 onunload 属性 。 这 样 ， 当 “Web 浏览 器 和 卸载 HTML 文 
档 ” 时 ， 就 会 调用 相应 的 事件 处 理 函数 ， 并 弹出 一 个 警告 框 。 

注意 : 在 使 用 对 象 及 有 关 属 性 处 理事 件 时 ， 可 以 先 定义 事件 处 理 函 数 再 将 该 函数 赋 
值 给 window 对 象 或 HTML 元 素 对 象 的 相关 属性 ， 也 可 以 直接 将 匿名 的 事件 处 理 函数 及 其 
定义 赋值 给 window 对 象 或 HTML 元 素 对 象 的 相关 属性 。 








(32 事件 的 综合 处 理 


在 JavaScript 中 ， 不 仅 可 以 处 理 窗口 事件 和 鼠标 事件 ， 而 且 能 够 处 理 表单 事件 。 在 处 
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理 表单 事件 时 ， 有 时 还 需要 动态 地 调整 某 些 控件 的 工作 状态 。 如 图 13-4 (a) 所 示 ， 打 开 
“ 带 有 开始 按钮 和 停止 按钮 的 计数 器 ”网 页 后 ，“ 计 数 器 ”进入 预备 状态 一 一 启用 “开始 
计数 ”按钮 、 禁 用 “停止 计数 ”按钮 。 对 于 处 于 预备 状态 的 计数 器 ， 单 击 “ 开 始 计数 ” 按 
钮 后 ，“ 计 数 器 ”进入 如 图 13-4 (b) 所 示 的 计数 状态 一 一 禁用 “开始 计数 ”按钮 、 启 上 
“停止 计数 ”按钮 ， 并 在 文本 框 中 定期 地 更 新 计数 值 。 对 于 处 于 计数 状态 的 计数 器 ， 单 击 
“停止 计数 ”按钮 后 ，“ 计 数 器 ”重新 进入 如 图 13-4(c) 所 示 的 预备 状态 一 一 启用 “ 开 
人 计数” 按钮 、 禁 用 “停止 计数 ”按钮 ， 并 在 文本 框 中 显示 最 终 的 计数 值 。 























太 带 有 开始 按钮 和 停止 按钮 的 计数 到 --- 攻 | 操 | 陨 | | 太 带 有 开始 按钮 和 停止 按钮 的 计数 器 --- 攻占] 了 | 
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(a)“ 计 数 器 ”处 于 预备 状态 
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(c)“ 计 数 器 ”重新 进入 预备 状态 
图 13-4 ” 带 有 开始 按钮 和 停止 按钮 的 计数 器 


【 例 13-11】 带 有 开始 按钮 和 停止 按钮 的 计数 器 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtml1/VDTD/Vxhtml1-strict.dtd"> 
<htm1l xmlns="http://www.wW3.org/1999/Xhtm1"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 带 有 开始 按钮 和 停止 按钮 的 计数 器 </title> 
<script type="text/javascript"> 
var counter; // 计 数 器 
var timerID; // 定 时 器 ID 


function getReady() { 
counter=0; // 计 数 器 清 零 (初始 化 ) 
document .getElementById('beginButton') .disabled=false; 
// 启 用 “开始 计数 ”按钮 
document .getElementById('stopButton') .disabled=true; 
// 禁 用 “停止 计数 ”按钮 
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function refreshCounter () { 
document .getElementById('txt') .value=counter; // 显 示 计 数 器 的 最 新 值 
countert+; // 更 新 计数 器 的 值 


function beginCount() { 
document .getElementById('beginButton') .disabled=true; 
// 禁 用 “开始 计数 ”按钮 
document .getElementById('stopButton') .disabled=false; 
// 启 用 “停止 计数 ”按钮 
refreshCounter () 7 // 显 示 计数 器 的 初始 值 0 
timerID=setInterval ("refreshCounter()",1000);  // 设 置 Interval 定时 器 
} 


function stopCount() { 
getReady (); 
clearInterval (timerID); // 清 除 Interval 定时 器 
} 
</script> 
</head> 
<body onload="getReady () "> 
<form action=""> 
<input type="button" id="beginButton" value=" 开 始 计数 " onclick= 
"begincount () "/> 
<input type="text" id="txt"/> 
<input type="button" id="stopButton" value=" 停 止 计 数 " onclick= 
"stopCount () "/> 
</form> 
</body> 
</html> 


在 XHTML 文档 主体 定义 了 一 个 表单 ， 其 中 包含 一 个 文本 框 和 两 个 按钮 。 在 这 三 个 控 
件 对 应 的 input 元素 的 开始 标签 中 均 使 用 了 id 属性， 这 样 可 以 唯一 地 标识 每 个 input 元素。 
单 击 “ 开 始 计数 ”按钮 ， 可 以 触发 onclick 事件 ， 并 通过 相应 input 元 素 的 onclick 属性 值 调 
用 beginCount 函数 ， 启 动 计数 器 并 开始 计数 。 单 击 “ 停 止 计数 ”按钮 ， 同 样 可 以 触发 
onclick 事件 ， 通 过 相应 input 元 素 的 onclick 属性 值 调用 stopCount 函数 ， 关 闭 计数 器 并 停 
止 计 数 。 

在 上 述 JavaScript 中 定义 了 全 局 变量 counter 和 timerID，counter 用 作 计 数 器 ， 而 
timerID 则 用 作 定 时 器 ID 。 

此 外 ， 在 XHTML 文档 头 部 还 定义 了 getReady 、refreshCounter 、beginCount 和 
stopCount 四 个 函数 。 

在 getReady 函数 中 ， 首 先 为 全 局 变量 counter 赋 值 0、 代 表 计数 器 清 零 ， 然 后 启用 “ 开 
始 计数 ”按钮 , 并 禁用 “停止 计数 ”按钮 。 这 样 ， 调 用 getReady 函数 能 够 让 “计数 器 ” 进 




















六 Web 标准 网 页 设计 原理 与 前 端 开 发 技术 


入 预备 状态 。 

在 refreshCounter 函数 中 ， 首 先 通过 document 对 和 象 调用 getElementById 方法 可 以 访问 
id 属性 值 为 txt 的 input 元 素 ， 并 在 其 对 应 的 文本 框 中 显示 计数 器 的 最 新 值 ， 然 后 通过 对 全 
局 变量 counter 累加 1 更 新 计数 器 的 值 。 

在 beginCount 函数 中 ， 首 先 禁 用 “开始 计数 ”按钮 ， 并 启用 “停止 计数 ”按钮 ， 然 后 
通过 调用 refreshCounter 函数 显示 计数 器 的 初始 值 0， 最 后 ， 调 用 setInterval 方法 设置 一 个 
定时 器 ， 该 定时 器 能 够 控制 每 隔 1 秒 钟 调用 refreshCounter 函数 一 次 ， 这 样 就 能 在 表单 的 
文本 框 中 定期 显示 计数 器 的 最 新 值 。 

在 stopCount 函数 中 ， 首 先 通 过 调用 getReady 函数 让 “计数 器 ”重新 进入 预备 状态 ， 
然后 清除 Interval 定时 器 。 

在 三 个 HTML 元 素 的 开始 标签 中 对 相应 的 事件 进行 了 处 理 。 在 body 元 素 的 开始 标签 
中 处 理 了 “Web 浏览 器 加 载 HTML 文档 ”所 触发 的 onload 事件 ， 在 id 属性 值 为 
beginButton 的 input 元 素 的 开始 标签 中 处 理 了 单 击 “ 开 始 计数 ”按钮 所 触发 的 onclick 事 
件 ， 在 id 属性 值 为 stopButton 的 input 元 素 的 开始 标签 中 处 理 了 单 击 “ 停 止 计数 ”按钮 所 
触发 的 onclick 事件 。 


全 


BOM 和 DOM 为 JavaScript 编程 提供 了 更 多 的 功能 。 在 JavaScript 中 使 用 BOM 提供 的 
专门 对 象 可 以 与 Web 浏览 器 进行 交互 ， 而 DOM 则 使 得 JavaScript 对 HTML 文档 有 了 空前 
的 访问 和 处 理 能 力 。 

在 BOM 中 ，window 对 象 是 核心 。 通 过 window 对 象 调用 setTimeout 方法 可 以 设置 定 
时 器 ， 以 便 在 一 段 时 间 之 后 执行 指定 的 JavaScript 代码 ; 而 通过 window 对 象 调用 
setInterval 方法 设置 的 定时 器 ， 则 可 以 每 隔 一 段 时 间 周 期 性 执行 指定 的 JavaScript 代码 。 

基于 DOM，JavaScript 可 以 对 HTML 元 素 进行 深层 次 操作 一 一 或 者 修改 HTML 元 素 
的 内 容 ， 或 者 修改 HIML 元 素 的 属性 。 














在 DOM 中 ， 文 档 节点 、 元 素 节 点 、 属 性 节点 、 文 本 节点 和 注释 节点 构成 具有 层次 结 
构 的 HIML 文档 树 。 


在 JavaScript 中 ，HTML 文档 树 的 文档 节点 document 以 及 每 个 元 素 节点 都 被 看 作 一 个 
对 象 。 文 档 节点 document 对 应 的 对 象 称 为 document 对 象 ， 元 素 节 点 对 应 的 对 象 称 为 元 素 
对 象 。document 对 象 和 元 素 对 象 都 拥有 属性 ， 通 过 document 对 象 和 元 素 对 象 可 以 调用 相 
应 的 方法 。 

使 用 元 素 对 象 的 innerHTML 属性 ， 可 以 获取 和 设置 元 素 的 内 容 。 

通过 document 对 象 调用 getElementById 方法 ， 可 以 根据 指定 的 id 属性 值 返回 HTML 
文档 树 中 唯一 的 具有 该 id 属性 值 的 元 素 节点 。 通 过 document 对 象 调 用 
getElementsByTagName 方法 ， 可 以 访问 HIML 文档 树 中 一 组 同名 的 元 素 节 点 〈 对 象 ) 。 

事件 是 JavaScript 和 DOM 之 间 进 行 交 互 的 桥梁 。 当 某 个 事件 发 生 时 ， 可 以 通过 调用 
对 应 的 事件 处 理 函 数 执行 特定 的 JavaScript 代码 。 
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在 HTML 元 素 的 开始 标签 中 ， 可 以 通过 相关 属性 值 调用 事件 处 理 函数 ， 以 完成 相应 
的 事件 处 理 任务 。 


@ aa 


1. 制作 一 个 网 页 (HTML 文档 名 为 ex-13-1.htm) ， 在 用 Web 浏览 器 打开 该 网 页 的 同 
时 ， 还 会 在 屏幕 的 右 下 角 打开 一 个 临时 的 广告 窗口 (HTML 文档 名 为 adWindow.htm) ， 该 
广告 窗口 会 在 三 十 秒 钟 后 自动 关闭 。 在 该 广告 窗口 中 单 击 一 个 广告 图 片 ， 又 可 以 在 一 个 新 
的 Web 浏览 器 窗口 中 打开 广告 图 片 所 链接 网 站 的 首页 。 

2. 在 【 例 13-7】 的 displayTextString 函数 中 ， 将 让 语句 中 的 else 部 分 改写 为 

esle document .getElementById("idForTextString") .innerHTML="charNum= 

"+ (CharNum++) 7 


然后 重新 用 Web 浏览 器 打开 XHTML 文档 , 观察 网 页 上 字符 串 的 变化 情况 ， 并 分 析 和 
说 明 其 原因 。 

3. 在 【 例 13-7】 中 ，“ 打 字 效果 的 字符 串 ” 仅 显示 一 遍 ， 改 写 JavaScript， 使 “打字 
效果 的 字符 串 ” 无 限 循环 显示 。 

4. 使 用 HTML 文档 树 中 的 元 素 对 象 及 有 关 属 性 处 理事 件 ， 改 写 【 例 13-11】。 

5. 参照 【 例 13-11】， 在 网 页 中 制作 如 图 13-5 所 示 的 带 有 开始 、 和 暂停 /继续 和 停止 三 
个 按钮 的 计数 器 。 


人 带 有 开始 、 暂 停 /继续 和 停止 三 个 接 --- 攻 | 器 | 区 带 有 开始 、 暂 停 /继续 和 停止 三 个 近 .-。 攻 后] 区 
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Ce) “计数 器 ”处 于 暂停 状态 (d) “计数 器 ”重新 进入 预备 状态 
图 13-5 带 有 开始 、 暂 停 /继续 和 停止 三 个 按钮 的 计数 器 


(1) 打开 网 页 后 ，“ 计 数 器 ”进入 如 图 13-5 (a) 所 示 的 预备 状态 一 一 启用 “开始 ” 
按钮 、 禁 用 “暂停 ”和 “停止 ”按钮 。 
(2) 对 于 处 于 预备 状态 的 计数 器 ， 单 击 “ 开 始 ” 按 钮 后 ，“ 计 数 器 ”进入 如 图 


13-5 (b) 所 示 的 计数 状态 一 一 禁用 “开始 ”按钮 、 启 用 “和 暂停 ”和 “停止 ”按钮 ， 并 在 文 
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本 框 中 定期 地 更 新 计数 值 。 

(3) 对 于 处 于 计数 状态 的 计数 器 ， 如 果 单 击 “暂停 ”按钮 ，“ 计 数 器 ”将 进入 如 图 
13-5(c) 所 示 的 暂停 状态 一 一 将 “暂停 ”按钮 转变 为 “继续 ”按钮 ， 禁 用 “开始 ”按钮 、 
启用 “继续 ”和 “停止 ”按钮 ， 并 在 文本 框 中 固定 显示 计数 值 。 如 果 单 击 “ 停 止 ”按钮 ， 
“计数 器 ”将 重新 进入 如 图 13-5 (d) 所 示 的 预备 状态 一 一 启用 “开始 ”按钮 、 禁 用 “和 暂 
停 ” 和 “停止 ”按钮 ， 并 在 文本 框 中 显示 最 终 的 计数 值 。 

(4) 对 于 处 于 暂停 状态 的 计数 器 ， 如 果 单 击 “ 继 续 ” 按 钮 ,“ 计 数 器 ”将 再 次 进入 如 
图 13-5 (b) 所 示 的 计数 状态 一 一 将 “继续 ”按钮 转变 为 “暂停 ”按钮 ， 禁 用 “开始 ” 按 
钮 、 启 用 “暂停 ”和 “停止 ”按钮 ， 并 在 文本 框 中 定期 地 更 新 计数 值 。 如 果 单 击 “ 停 止 ” 
按钮 “计数 器 ”将 重新 进入 如 图 13-5(d) 所 示 的 预备 状态 一 一 将 “继续 ”按钮 转变 为 “ 暂 
停 ”按钮 ， 启 用 “开始 ”按钮 、 禁 用 “暂停 ”和 “停止 ”按钮 ， 并 在 文本 框 中 显示 最 终 的 
计数 值 。 
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动态 HIML (Dynamic HTML，DHTML) 是 一 种 使 WWW 页 面具 有 动态 特性 的 技术 。 
从 某 种 角度 上 讲 ，DHTML 是 HIML、CSS 和 JavaScript 的 组 合 应 用 。 通 过 DHTML， 可 以 
控制 如 何在 Web 浏览 器 窗口 中 显示 和 定位 HTML 元 素 。DOM 是 一 个 独立 于 语言 和 平台 的 
接口 ， 它 允许 JavaScript 动态 地 访问 和 更 新 HTML 文档 的 内 容 、 结 构 以 及 表现 ， 也 为 
DHTML 技术 提供 了 更 强大 的 功能 。 


(4 绝对 定位 和 相对 定位 


HTML 元 素 及 盒子 在 网 页 中 的 位 置 与 其 position 特性 密切 相关 。 默 认 情况 下 ，HTML 
元 素 的 position 特性 值 是 static。 此 时 ，HTML 元 素 及 盒子 按照 正常 流 或 浮动 方式 排列 。 此 
外 ，HTML 元 素 的 position 特性 值 还 可 以 是 absolute 或 relative， 即 在 网 页 中 对 HTML 元 素 
及 盒子 进行 绝对 定位 或 相对 定位 。 


14.1.1 绝对 定位 


当 position 特性 值 是 absolute 时 ，HTML 元 素 及 盒子 将 以 它 的 包含 块 (Containing 
Block) 为 基准 ， 根 据 left (或 right) 和 top (或 bottom) 特性 值 在 水 平和 垂直 方向 偏 移 。 
【 例 14-1】 HTML 元 素 及 盒子 的 绝对 定位 。XHTML 和 CSS 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 绝 对 定位 </title> 
<style type="text/css"> 
p { width:650px; padding:25px; border:2px solid red; } /* position: 
relative; */ 
em { position:absolute; left:80px; top:30px; background-color:silver; } 
</style> 
</head> 
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<body> 
<p>HTML 元 素 及 盒子 在 网 页 中 的 位 置 与 其 position 特性 密切 相关 。<em> 在 默认 情况 下 ， 
</em>HTML 元 素 的 position 特性 值 是 static， 此 时 元 素 及 盒子 按照 正常 流 或 浮动 方式 排列 。 此 外 ， 
HTML 元 素 的 position 特性 值 还 可 以 是 absolute 或 relative， 即 在 网 页 中 对 HTML 元 素 及 盒子 进 
行 绝对 定位 或 相对 定位 。</p> 
</body> 
</html> 


在 HTML 文档 头 部 的 内 部 样式 表 中 ， 第 2 条 CSS 规则 使 用 特性 声明 position:absolute 
对 em 元 素 及 盒子 进行 绝对 定位 。 如 图 14-1 所 示 ， 使 用 正 浏览 器 打开 该 HTML 文档 时 ， 
可 以 发 现 em 元 素 的 内 容 “ 在 默认 情况 下 ，” 完 全 脱离 了 正常 流 。 在 本 例 中 ， 由 于 em 元 
素 的 所 有 先辈 元 素 都 没有 使 用 绝对 定位 或 相对 定位 ， 所 以 em 元 素 的 包含 块 就 是 正 浏览 器 
窗口 。 此 时 ，em 元 素 及 盒子 将 以 正 浏览 器 窗口 为 基准 、 按 照 left 和 top 特性 值 在 水 平和 
垂直 方向 偏 移 。 


《 a >] 同 Fwe Psevweeisweuttel-9 中 周二 ||X] 圆 引 8 
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HTML 的 位 置 与 其 posiion 特 性 密切 相关 。 error 
Static, ede di fe dees 此 外 ，HTML 元 素 的 posiion 特 性 值 还 可 以 
是 absolute 或 relatve， 即 在 网 页 中 对 HTML 元 素 及 人 金子 进行 绝对 定位 或 相对 定位 。 





图 14-1 以 IE 浏览 器 窗口 为 基准 绝对 定位 


如 果 在 第 1 条 CSS 规则 中 增加 一 个 特性 声明 position:relative，p 元 素 就 成 为 距离 em 
元 素 最 近 的 且 使 用 相对 定位 的 先辈 元 素 。 此 时 ，em 元 素 及 盒子 将 以 p 元 素 及 盒子 为 基准 、 按 
照 left 和 top 特性 值 在 水 平和 垂直 方向 偏 移 ， 如 图 14-2 所 示 。 
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与 其 position 特 性 密切 相关 。HTML 元 素 的 position 特 性 值 是 
ee 此 外 ，HTML 元 元 素 的 posiion 特 性 值 还 可 以 
do etoy 即 在 网 页 中 对 HTML 元 素 及 人 金子 进行 绝对 定位 或 相对 定位 。 





图 14-2 ”以 p 元 素 及 盒子 为 基准 绝对 定位 


注意 : 

Q 绝对 定位 的 HTML 元 素 及 盒子 完全 脱离 正常 流 ， 并 且 对 其 他 元 素 及 盒子 的 定位 没 
有 任何 影响 

@ 为 了 对 HIML 元 素 及 盒子 准确 地 进行 绝对 定位 ， 需 要 对 距离 该 HIML 元 素 尽 可 能 
近 的 某 个 先 莫 元 素 进行 相对 定位 。 
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14.1.2 ”相对 定位 


当 position 特性 值 是 relative 时 ，HTML 元 素 及 盒子 将 以 其 在 正常 流 中 的 位 置 为 基准 ， 
根据 left 和 top 特性 值 在 水 平和 垂直 方向 偏 移 。 
【 例 14-2】 HTML 元 素 及 盒子 的 相对 定位 。XHTML 和 CSS 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 
<html] xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 相 对 定位 </title> 
<style type="text/css"> 
p { width:650px; padding:25px; border:2px solid red; } 
em { position:relative; left:80px; top:30px; background-color:silver; } 
</style> 
</head> 
<body> 
<p>HTML 元 素 及 盒子 在 网 页 中 的 位 置 与 其 position 特性 密切 相关 。<em> 在 默认 情况 下 ， 
</em>HTML 元 素 的 position 特性 值 是 static， 此 时 元 素 及 盒子 按照 正常 流 或 浮动 方式 排列 。 此 外 ， 
HTML 元 素 的 position 特性 值 还 可 以 是 absolute 或 relative， 即 在 网 页 中 对 HTML 元 素 及 盒子 进 
行 绝对 定位 或 相对 定位 。</p> 
</body> 
</html> 


在 HTML 文档 头 部 的 内 部 样式 表 中 ， 第 2 条 CSS 规则 使 用 特性 声明 position: relative 
对 em 元 素 及 盒子 进行 相对 定位 ， 其 他 代码 与 前 例 中 的 完全 相同 。 如 图 14-3 所 示 ， 使 用 正 
浏览 器 打开 该 HTML 文档 时 ， 可 以 发 现 em 元 素 的 内 容 “ 在 默认 情况 下 ，” 相 对 于 其 在 
正常 流 中 的 位 置 发 生 了 偏 移 ， 但 其 在 正常 流 中 的 位 置 和 所 占 空间 并 不 会 被 其 他 元 素 取代 和 
占据 。 


SS 相对 定位 - Windows Internet Explorer 
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HTML 元 素 及 盒子 在 网 页 中 的 位 置 与 其 position 特 性 密切 相关 ， 
position 特 性 值 是 static， 此 元 于 及 全 于 近 归 下 开动 
position 特 性 值 还 可 以 是 absclute 或 relative， 即 在 网 页 中 对 HT 








14-3 ”设置 em 元 素 及 盒子 为 相对 定位 
对 HTML 元 素 及 盒子 进行 相对 定位 后 会 发 生 以 下 两 种 情况 : 
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(1) HTML 元 素 及 盒子 在 正常 流 中 的 位 置 和 所 占 空间 会 被 保留 ， 这 也 说 明 相 对 定位 
的 HIML 元 素 及 盒子 仍然 在 正常 流 中 。 

(2) 在 网 页 中 ， 相 对 定位 的 HTML 元 素 及 盒子 会 与 其 他 HIML 元 素 及 盒子 发 生 重叠。 

对 某 个 HIML 元 素 及 盒子 进行 相对 定位 的 作用 可 归纳 为 以 下 两 点 : 

(1) 使 该 HTML 元 素 及 盒子 相对 于 其 在 正常 流 中 的 位 置 发 生 偏 移 ， 同 时 不 放弃 其 在 
正常 流 中 的 位 置 和 所 占 空间 。 

(2) 使 该 HTML 元 素 及 盒子 成 为 其 后 代 元 素 及 盒子 的 包含 块 ， 这 样 后 代 元 素 及 盒子 

能 够 以 该 HTML 元 素 及 盒子 为 基准 进行 绝对 定位 ， 如 图 14-2 所 示 。 


下 拉 菜 音 


利用 HTML 元 素 及 盒子 的 绝对 定位 和 相对 定位 技术 ， 可 以 制作 如 图 14-4 所 示 的 CSS 
下 拉 菜 单 。 


/ CSS 下 拉 菜单 - Windows Internet.-- 攻 | 问 |] 区 ] || 
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图 14-4 CSS 下 拉 菜单 


【 例 14-3】 使 用 HTML 元 素 的 绝对 定位 和 相对 定位 制作 CSS 下 拉 菜 单 。XHTML 和 
CSS 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>CSS 下 拉 菜 单 </title> 
<style type="text/css"> 
#naviBar { width:315px; margin:0px auto; } 
/* 使 用 ul 元 素 定义 主 菜单 */ 
#naviBar ul { padding:0px; margin:0px; list-style-type:none; } 
* 使 用 1i 元 素 定义 主 菜单 项 视频、 小说、 购物 ) */ 
#naviBar ul 1i { position:relative; float:left; width:104px; height: 
30px; 
border:1px solid white; border-width:1lpx lpx 0 0; line-height:30px; 
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text-align:center; background-color:#cca; } 

/* 使 用 ul 元 素 定义 子 菜单 ， 并 隐藏 子 菜单 */ 

#naviBar ul 1i ul { display:none; } 

/* 当 鼠 标 滑 过 主 菜 单项 时 ， 显 示 子 菜单 、 并 将 其 绝对 定位 于 对 应 的 主 菜单 项 下 面 */ 

#naviBar ul li:hover ul { display:block; position:absolute; top:30px; 
left:0px; width:105px; } 

/* 在 子 菜单 项 中 ， 设 置 文 本 超 链 接 及 其 背景 的 颜色 */ 

#naviBar a { display:block; text-decoration:none; color:olive; 
background-color:#fec; } 

/* 当 鼠 标 滑 过 文本 超 链接 时 ， 改 变 文本 超 链接 及 其 背景 的 颜色 */ 


#naviBar a:hover { color:red; background-color:#dc8; } 


</style> 
</head> 
<body> 
<div id="naviBar"> <!--div 元 素 定义 水 平 导 航 条 --> 
<ul> <!--ul 元 素 定义 主 菜单 --> 
<1i> 视 频 <!--1i 元 素 定义 主 菜单 项 --> 
<ul> <!--ul 元 素 定义 子 菜单 --> 
<li><a href="http://www.youku.com"> 优 酷 </a></1i> <!--1i 元 素 定义 子 
菜单 项 --> 


<li><a href="http://www.tudou.com"> 土 豆 </a></1i> 
<1i><a href="http://www.iqiyi.com"> 奇 艺 高 清 </a></1i> 
</ul> 
/1 
<1i> 小 说 
<ul> 
<1li><a href="http://www.qidian.com"> 起 点 </a></1i> 
<li><a href="http://www.hongxiu.com"> 红 袖 添 香 </a></1i> 
<li><a href="http://www.xxsy.com"> 潇 湘 书院 </a></1i> 
</ul> 
</1i> 
<1i> 购 物 
<ul> 
<li><a href="http://www.taobao.com"> 淘 宝 </a></1i> 
<1i><a href="http://www.amazon.cn"> 亚 马 逊 </a></1i> 
<1i><a href="http://www.360buy.com"> 京 东 商 城 </a></1i> 
</ul> 
</1i> 
</ul> 
</div> 
</body> 
</html> 


在 HTML 文档 主体 ，id 属性 值 为 naviBar 的 div 元 素 定 义 了 一 个 水 平 导 航 条 。 在 水 平 
导航 条 内 ， 又 使 用 两 级 无 序列 表 分 别 定义 了 一 个 主 菜单 和 三 个 子 菜单 。 外 层 的 也 元 素 定 
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义 了 主 菜 单 。 在 主 菜单 中 ， 又 使 用 三 个 二 元 素 定 义 了 “视频 ”“ 小 说 ”和 “购物 ”三 个 主 
菜单 项 。 在 每 个 定义 主 菜单 项 的 下 元 素 中 ， 又 使 用 一 个 由 元 素 和 三 个 下 元 素 定义 了 子 菜单 
和 子 菜单 项 。 

以 上 内 部 样式 表 中 的 第 3 条 CSS 规则 : 


#naviBar ul 1i { position:relative; float:left; width:104px; height:30px7… 


将 二 元 素 的 position 和 float 特性 分 别 声明 为 relative 和 left， 其 作用 是 : 将 相对 定位 的 三 个 
二 元 素 保留 在 正常 流 中 ， 并 使 它们 在 正常 流 中 向 左 浮动 。 这 三 个 元 素 向 左 浮动 ， 可 以 使 
“视频 ”“ 小 说 ”和 “购物 ”三 个 主 菜 单项 依次 水 平 排列 。 此 外 ， 对 这 三 个 元 素 相对 定 
位 ， 还 可 以 使 其 子 元 素 世 (该 蕊 元 素 定义 子 菜单 ) 能 够 以 其 为 基准 进行 绝对 定位 。 

在 内 部 样式 表 的 第 5 条 CSS 规则 中 使 用 了 li:hover 伪 类 。 这 样 ， 当 鼠标 滑 过 主 菜 单项 
时 ， 将 产生 相应 的 动态 效果 一 一 显示 子 菜单 。 类 似 地 ， 在 内 部 样式 表 的 第 7 条 CSS 规则 中 
使 用 了 a:hover 伪 类 。 这 样 ， 当 鼠标 滑 过 子 菜单 项 时 ， 也 将 产生 相应 的 动态 效果 一 一 改变 
文本 超 链接 及 其 背景 的 颜色 。 这 表明 CSS 也 具有 一 定 的 响应 鼠标 事件 的 行为 能 力 一 一 类 
似 于 发 生 在 和 a 元 素 上 的 mouseover 事件 。 实 际 上 ， 使 用 JavaScript 也 可 以 制作 具有 同 
样 动 态 效 果 的 下 拉 菜 单 。 

【 例 14-4】 使 用 JavaScript 制作 下 拉 菜 单 。XHTML、CSS 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>JavaScript 下 拉 菜 单 </title> 
<style type="text/css"> 

#naviBar { width:315px; margin:0px auto; } 

/* 使 用 ul 元 素 定义 主 菜单 */ 

#naviBar ul { padding:0px; margin:0px; list-style-type:none; } 

/* 使 用 1i 元 素 定 义 主 菜单 项 */ 

#naviBar ul 1i { position:relative; float:left; width:104px; height:30px; 
border:1px solid white; border-width:1px lpx 0 0; line-height:30px; 
text-align:center; background-color:#cca; } 

/* 使 用 ul 元 素 定义 子 菜单 ， 隐 藏 子 菜单 、 但 将 其 绝对 定位 于 对 应 的 主 菜单 项 下 面 */ 

#naviBar ul li ul { visibility:hidden; position:absolute; top:30px; 

left:0px; 
width:105px; 

/* 在 子 菜单 项 中 ， 设 竺 文本 起 链接 及 其 青 景 的 病 色 */ 

#naviBar a { display:block; text-decoration:none; color:olive; 
background-color:#fec; } 

</style> 
<script type="text/javascript"> 

/* 当 鼠 标 滑 过 主 菜单 项 时 ， 显 示 相应 的 子 菜单 */ 

function showSubMenu (elmntId) { document .getElementById (elmntId) .style. 
visibility="visible"; } 
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/* 当 鼠 标 离开 主 菜单 项 时 ， 隐 藏 相应 的 子 菜单 */ 
function hideSubMenu (elmntId) { document .getElementById (elmntId) .style. 
visibility="hidden"; } 
/* 当 鼠 标 滑 过 超 链 接 时 ， 改 变 文本 超 链接 及 其 背景 的 颜色 */ 
function changeLinkColor (aElement) { 

aElement .style.color="red"; 


aElement .style.background="#dc8"; 


} 
/* 当 鼠 标 离开 超 链接 时 ， 恢 复 文 本 超 链接 及 其 背景 的 颜色 */ 
function recoverLinkColor(aElement) { 
aElement .style.color="olive"; 
aElement .style.background="#fec"; 
} 
</script> 
</head> 
<body> 
<div id="naviBar"> 
<ul> 
<li onmouseover="showSubMenu('video')" onmouseout="hideSubMenu 
('video')"> 视 频 
<ul id="video"> 
<li><a href="http://www.youku.com" onmouseover="changeLinkColor 
(this)" 
onmouseout="recoverLinkColor (this) "> 优酷 </a></1i> 
<li><a href="http://www.tudou.com" onmouseover="changeLinkColor 
(this)" 
onmouseout="recoverLinkColor (this) "> 土豆 </a></1i> 
<li><a href="http://www.iqiyi.com" onmouseover="changeLinkColor 
(this)" 
onmouseout="recoverLinkColor (this)"> 奇 艺 高 清 </a></1i> 
</ul> 
</1i> 
<li onmouseover="showSubMenu('novel')" onmouseout="hideSubMenu 
('novel')"> 小 说 
<ul id="novel"> 
<li><a href="http://www.qidian.com" onmouseover="changeLinkColor 
(this)™ 
onmouseout="recoverLinkColor (this)"> 起 点 </a></1i> 
<li><a href="http://www.hongxiu.com" onmouseover="changeLinkColor 
(this}™ 
onmouseout="recoverLinkColor (this) "> 红袖 添 香 </a></1i> 
<li><a href="http://www.xxsy.com" onmouseover="changeLinkColor 
(thisy™ 
onmouseout="recoverLinkColor (this) "> 潇湘 书院 </a></1i> 
</ul> 
/flix 


<li onmouseover="showSubMenu('shop')" onmouseout="hideSubMenu 
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('shop') "> 购物 
<ul id="shop"> 
<1i><a href="http://www.taobao.com" onmouseover="changeLinkColor 
(this)" 
onmouseout="recoverLinkColor (this) "> 淘宝 </a></1i> 
<li><a href="http://www.amazon.cn" onmouseover="changeLinkColor 
(this)" 
onmouseout="recoverLinkColor (this) "> 亚马逊 </a></1i> 
<li><a href="http://www.360buy.com" onmouseover="changeLinkColor 
(this)" 
onmouseout="recoverLinkColor (this) "> 京东 商城 </a></1i> 
</ul> 
SN 
</ul> 
</div> 
</body> 
</html> 


与 前 例 一 样 ， 在 本 例 的 HTML 文档 主体 ， 使 用 两 级 无 序列 表 分 别 定 义 了 一 个 主 菜单 
和 三 个 子 菜单 。 外 层 的 dQ 元 素 定 义 了 主 菜 单 。 在 主 菜单 中 ， 又 使 用 三 个 元 素 定义 了 “ 视 
频 ”“ 小 说 ”和 “购物 ”三 个 主 菜单 项 。 

与 前 例 不 同 ， 在 本 例 的 内 部 样式 表 中 没有 定义 hover 伪 类 的 CSS 规则 ， 但 在 HIML 文 
档 头 部 定义 了 四 个 与 鼠标 操作 有 关 的 事件 处 理 函 数 。 

(1) 当 和 鼠标 指针 滑 过 主 菜 单项 (“视频 ”“ 小 说 ”或 “购物 ”) 时， 会 在 相应 的 二 元 
素 上 触发 mouseover 事件 ， 此 时 通过 1i 元 素 的 onmouseover 属性 值 调用 showSubMenu 函 
数 ， 将 显示 相应 的 子 菜单 。 

(2) 当 鼠 标 指针 离开 主 菜单 项 〔(“ 视 频 ”“ 小 说 ”或 “购物 ”) 时 ， 会 在 相应 的 二 元 
素 上 触发 mouseout 事件 ， 此 时 通过 1i 元 素 的 onmouseonut 属性 值 调 用 hideSubMenu 函数 ， 
将 隐藏 相应 的 子 菜单 。 

(3) 当 鼠 标 指针 滑 过 子 菜单 项 中 的 文本 超 链 接 〈 如 “优酷 ”“ 起 点 ”或 “淘宝 ”等 ) 
时 ， 会 在 相应 的 开元 素 上 触发 mouseover 事件 ， 此 时 通过 开元 素 的 onmouseover 属性 值 调 
用 changeLinkColor 函数 ， 将 改变 文本 超 链 接 及 其 背景 的 颜色 。 

(4) 当 鼠 标 指针 离开 子 菜单 项 中 的 文本 超 链接 (如 “优酷 ”“ 起 点 ”或 “淘宝 ”等 ) 
时 ， 会 在 相应 的 五 元 素 上 触发 mouseout 事件 ， 此 时 通过 I 元 素 的 onmouseonut 属性 值 调用 
IecoverLinkColor 函数 ， 将 恢复 文本 超 链接 及 其 背景 的 颜色 。 


(43 垂直 移动 的 文本 





对 于 绝对 定位 的 HTML 元 素 ， 还 可 以 在 CSS 规则 中 使 用 clip 特性 对 该 元 素 及 盒子 中 
的 内 容 进 行 裁剪。 
【 例 14-S】 使 用 clip 特 性 对 元 素 及 盒子 中 的 内 容 进 行 裁 前 。XHTML 和 CSS 代码 如 下 : 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-—strict.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/zxhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 使 用 clip 特性 对 元 素 及 盒子 中 的 内 容 进行 裁剪 </title> 
<style type="text/css"> 
/* 只 能 应 用 以 下 两 条 css 规则 中 的 一 条 */ 
#divBox { position:absolute; width:200px; height:200px; border:1px solid red; 
background:#FFFFEO0; } 
#divBox { position:absolute; width:200px; height:200px; border:1px solid red; 
background:#FFFFEO0; clip:rect (30px,170px,170px,30px); } 
#divBox a { text-decoration:none; } 
</style> 
</head> 
<body> 
<div id="divBox"> 
<br/><br/> 
<a href="http://www.sina.com">* 新 浪 网 重要 通知 ! 新 浪 网 重要 通知 ! </a> 
<br/><br/> 
<a href="http://www.baidu.com">* 百度 网 紧急 通知 ! 百度 网 紧急 通知 ! </a> 
<br/><br/> 
<a href="http://www.sohu.com">* 搜狐 网 重要 通知 ! 搜狐 网 重要 通知 ! </a> 
</div> 
</body> 
</html> 


当 应 用 以 上 内 部 样式 表 中 的 第 1 条 CSS 规则 而 不 应 用 第 2 条 CSS 规则 ) 时 ， 如 图 


14-5 〈a) 所 示 ， 在 网 页 中 可 以 看 到 div 元 素 中 的 所 有 文本 。 但 当 应 用 样式 表 中 的 第 2 条 
CSS 规则 而 不 应 用 第 1 条 CSS 规则 ) 时 ， 如 图 14-5 (b) 所 示 ， 则 在 网 页 中 只 能 看 到 div 
元 素 盒子 中 的 部 分 文本 ， 这 是 由 于 在 第 2 条 CSS 规则 中 使 用 了 clip 特性 的 缘故 。 


rectl 


未 ， 





在 第 2 条 CSS 规则 中 ，clip 特性 及 其 声明 为 : 
clip:rect (30px, 170px, 170px, 30px); 


(30px,170px,170px,30px) 中 的 四 个 参数 构成 了 一 个 clipWindow 窗口 。 如 图 14-5 (a) 所 
第 1 个 参数 (30px) 表示 clipWindow 窗口 的 上 边界 距离 div 元 素 盒 子 的 上 边界 30px， 


第 2 个 参数 (170px) 表示 clipWindow 窗口 的 右边 界 距离 div 元 素 盒子 的 左边 界 170px， 第 
3 个 参数 (170px) 表示 clipWindow 窗口 的 下 边界 距离 div 元 素 盒子 的 上 边界 170px， 第 4 
个 参数 〈30px) 表示 clipWindow 窗口 的 左边 界 距离 div 元 素 盒子 的 左边 界 30px。 而 


clip 


值 


Window 窗口 以 外 的 文本 部 分 则 被 “裁剪 ”了 。 
在 绝对 定位 的 div 元 素 上 应 用 clip 特性 ， 并 使 用 JavaScript 对 top 特性 值 以 及 clip 特性 
FP 的 参数 进行 动态 的 调整 ， 可 以 在 网 页 中 制作 垂直 移动 的 文本 并 产生 相应 的 动画 效果 。 








的 


ey Web 标准 网 页 设计 原理 与 前 端 开发 技术 














@ 
0p 4 
M30px 
新 浪 网 重要 通知 ! 新 浪 网 | 下 浪 网 重要 通知 ! 新 六 
通知 ! 通知 ! 
@170px 
百度 网 紧急 通知 ! 百 库 网 度 网 紧急 通知 | 百 上 
紧急 通知 ! 通知 ! 
搜狐 网 重要 通知 ! 搜 儿 网 果 网 重要 通知 ! 损 











@170px < 
(a) 没有 使 用 clip 特性 (b) 使 用 了 clip 特性 (clipWindow 窗口 ) 


图 14-5 ”使 用 clip 特性 对 元 素 及 盒子 中 的 内 容 进行 裁剪 
【 例 14-6】 和 王 直 移动 的 文本 ( 仅 播 放 一 次 ) 。XHTML、CSS 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0rg/TR/xhtmll1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 向 上 移动 的 文本 </title> 
<style type="text/css"> 
#outerBox { position:relative; width:198px; height:98px; 
border:1px solid red; background:#FFFFE0; } 
#innerBox { position:absolute; } 
#innerBox a { text-decoration:none; } 
</style> 
<script type="text/javascript"> 
var innerDivElement; // 指 代 innerBox 元 素 盒子 


var innerBoxTop; //innerBox 元 素 盒子 CSS 样式 特性 top 

var clipWindowWidth,clipWindowHeight;  //clipWindow 窗口 的 宽度 和 高 度 
var speed=100; // 控 制 innerBox 元 素 盒子 及 其 中 文本 向 上 移动 的 速度 
var timerID; // 定 时 器 ID 


function scrollText() { 
// 使 innerBox 元 素 盒子 及 其 中 的 文本 上 移 1 个 像素 
innerDivElement.style.top=(--innerBoxTop)+"px"; 
// 重 新 设置 clipWindow 窗口 ， 以 使 clipWindow 窗口 在 整个 网 页 中 的 位 置 及 尺寸 不 变 
innerDivElement.style.clip="rect ("+Math.abs (innerBoxTop)+"px, "+ 
clipWindowWidth+"px,"+(Math.abs (innerBoxTop)+clipWindowHeight)+ 
"Px, Opx) ™; 


window-onload=function() {  // 当 Web 浏览 器 加 载 HTML 文档 时 
// 获 取 innerBox 元 素 盒子 
innerDivElement=document .getElementById ("innerBox"); 
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// 设 置 innerBoxTop 的 初始 值 ， 即 innerBox 元 素 盒子 及 其 中 文本 的 初始 位 置 
innerBoxTop=0; 
// 获 取 outerBox 元 素 盒子 

Var outerDivElement=document .getElementById ("outerBox"); 
clipWindowWidth=outerDivElement .clientWidth; 
clipWindowHeight=outerDivElement .clientHeight; 
timerID=setInterval ("scrollText ()", speed); 

} 


window.onunload=function() { // 当 Web 浏览 器 卸载 HTML 文档 时 
clearInterval (timerID); 
alert ("unloading..."); 
} 
</script> 
</head> 
<body> 
<div id="outerBox"> 
<div id="innerBox"> 
<br/><br/> 
<a href="http://www.sina.com">* 新 浪 网 重要 通知 ! 新 浪 网 重要 通知 ! </a> 
<br/><br/> 
<a href="http://www.baidu.com">* 百度 网 紧急 通知 ! 百度 网 紧急 通知 ! </a> 
<br/><br/> 
<a href="http://www.sohu.com">* 搜狐 网 重要 通知 ! 搜狐 网 重要 通知 ! </a> 
</div> 
</div> 
</body> 
</html> 
在 上 述 代码 中 ， 对 id 属性 值 为 outerBox 的 div 元 素 及 盒子 进行 相对 定位 ， 对 id 属性 
值 为 innerBox 的 div 元 素 及 盒子 进行 绝对 定位 。 因 此 ，outerBox 元 素 盒子 即 是 innerBox 元 
盒子 的 包含 块 ，innerBox 元 素 盒子 也 就 能 够 以 outerBox 元 素 盒子 为 基准 进行 绝对 定位 。 
在 scrollText 函数 中 对 id 属性 值 为 mnerBox 的 div 元 素 设置 clip 特性 ， 使 得 在 网 页 中 只 能 
看 到 innerBox 元 素 盒子 中 的 部 分 文本 。 
当 Web 浏览 器 加 载 HTML 文档 时 ， 将 调用 匿名 的 load 事件 处 理 函 数 。 在 该 匿名 函数 
中 ， 首 先 将 clipWindow 窗口 的 宽度 和 高 度 设置 为 id 属性 值 为 outerBox 的 div 元 素 盒 子 的 
宽度 (clientWidth) 和 高 度 (clientHeight) ， 然 后 通过 Interval 定时 器 周期 性 调用 scrollText 
每 次 调用 scrollText 函数 时 ， 其 中 的 第 1 条 语句 将 全 局 变量 innerBoxTop 的 值 递减 1， 
并 将 其 赋值 给 innerBox 元 素 对 象 的 top 属性， 这 样 使 得 innerBox 元 素 盒子 及 其 中 的 文本 相 
对 于 outerBox 元 素 盒子 的 上 边界 上 移 1 个 像素 ; 执行 第 2 条 语句 时 ，clip 特性 值 的 第 1 个 
和 第 3 个 参数 也 随 之 递增 1, 因此 clipWindow 窗口 的 上 边界 和 下 边界 距离 innerBox 元 素 盒 
子 的 上 边界 都 会 增加 1 个 像素 ， 这 样 可 以 保持 clipWindow 窗口 的 高 度 不 变 ， 并 最 终 产生 
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“clipWindow 窗口 在 整个 网 页 中 的 位 置 及 尺寸 保持 不 变 、 同 时 innerBox 元 素 盒子 及 其 中 的 
文本 不 断 上 移 ” 的 动画 效果 。 


注意 : 

@ Math 是 JavaScript 的 内 置 对 象 ， 通 过 Math 对 象 可 以 调用 abs (绝对 值 ) 、ceil (大 
于 或 等 于 某 个 数 的 最 小 整数 ) 、floor (小 于 或 等 于 某 个 数 的 最 大 整数 ) 等 方法 。 

@) 由 于 在 scrollText 函数 中 不 断 地 减 小 innerBox 元 素 对 象 的 top 属性 值 ， 使 得 
innerBox 元 素 盒子 及 其 中 的 文本 会 不 断 地 上 移 ， 直 至 移出 Web 浏览 器 窗口 的 上 边界 。 

@ 在 本 例 中 ， 将 一 个 匿名 函数 赋值 给 window 对 象 的 onload 属性 、 而 不 是 在 body 元 
素 的 onload 属性 值 中 执行 JavaScript 语句 ， 可 以 更 好 地 实现 “内 容 和 结构 与 行为 的 
分 离 ”。 

图 在 本 例 中 , 将 另 一 个 匿名 函数 赋值 给 window 对 象 的 onunload 属性 。 这样 ， 当 Web 
浏览 器 印 载 HTML 文档 时 ， 即 可 调用 该 匿名 函数 ， 进 而 清除 由 setInterval 方法 设置 的 定时 
器 ， 这 样 可 以 释放 Interval 定时 器 占用 的 内 存 和 CPU 资源 。 


(4 水 平方 向 呈现 跑马 灯 效 果 的 文本 串 


使 用 JavaScript 及 String 对 象 的 字符 串 处 理 方法 ， 可 以 制作 水 平 滚动 的 文本 串 ， 并 使 
其 呈现 跑马 灯 (Marquee) 效果 。 
【 例 14-7】 水 平方 向 呈现 跑马 灯 效果 的 文本 串 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html] xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<tit1le> 水 平 滚动 的 文本 〈 跑 马 灯 ) </title> 
<script type="text/javascript"> 
Var divElement, text,timerID; 


function scrollText() { 
text+=text .substring (0,1); 
//text+=text.substr (0,1); 
text=text.substring (1, text.length); 
divElement .innerText=text.substring (0, text.1length); 
} 


window.onload=function() { 
divElement=document .getElementById ("marquee"); 


text=divElement .innerText7 
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timerID=setInterval ("scrollText ()",2000); 
} 


window.onunload=function() { 
ClearInterval (timerID); 
alert ("unloading..."); 
} 
</script> 
</head> 
<body> 
<div id="marquee"> JavaScript 是 一 种 非常 流行 的 Web 前 端 脚 本 语言 </div> 
</body> 
</html> 


当 Web 浏览 器 加 载 HTML 文档 时 ， 将 调用 匿名 的 load 事件 处 理 函 数 。 在 该 匿名 函数 
中 ， 第 1 条 语句 首先 通过 document 对 象 调用 getElementById 方法 获取 id 属性 值 为 marquee 
的 div 元 素 对 象 ， 然 后 将 其 赋值 给 全 局 变量 divElement， 该 变量 即 指 代 id 属性 值 为 marquee 
的 div 元 素 ; 该 div 元 素 对 象 的 innerText 属性 值 即 是 位 于 div 元 素 的 开始 标签 和 结束 标签 
之 间 的 文本 串 “JavaScript 是 一 种 非常 流行 的 Web 前 端 脚本 语言 ”， 第 2 条 语句 将 该 文本 
串 赋值 给 全 局 变量 text; 执行 第 3 条 语句 ， 可 以 通过 Interval 定时 器 周期 性 调用 scrollText 
函数 ， 并 将 setInterval 方法 返回 的 定时 器 ID 赋值 给 全 局 变量 timerID。 

每 次 调用 scrollText 函数 时 ， 其 中 的 第 1 条 语句 从 全 局 变量 text 所 保存 文本 串 中 取得 
其 中 的 第 1 个 字符 ， 并 将 该 字符 连接 在 整个 文本 串 的 末尾 ， 这 样 整个 文本 串 的 长 度 会 增加 
1。 执 行 第 2 条 语句 时 ， 从 起 始 位 置 1 (第 2 个 字符 ) 开始 、 到 终止 位 置 (text.length -1， 
即 最 后 一 个 字符 ) 截止 提取 子 串 ， 再 赋值 给 全 局 变量 text， 这 样 整个 文本 串 的 长 度 又 会 减 
小 1; 每 执行 scrollText 函数 中 的 前 两 条 语句 ， 相 当 于 将 原来 文本 串 中 的 第 1 个 字符 移 到 文 
本 串 的 末尾 。 执 行 第 3 条 语句 ， 会 将 最 新 的 文本 串 设置 为 div 元 素 的 最 新 文本 内 容 。 通 过 
Interval 定时 器 周期 性 调用 scrollText 函数 ， 即 可 使 文本 串 水 平 滚动 ， 并 呈现 跑马 灯 效 果 。 


注意 : 

Q 在 JavaScript 中 ， 如 果 需 要 在 多 个 函数 中 使 用 或 访问 同一 个 变量 ， 则 需要 在 所 有 函 
数 之 外 将 该 变量 定义 为 全 局 变量 。 在 本 例 中 ， 变 量 divElement、text 和 timerID 均 是 全 局 

@ 确切 地 说 ， 是 在 Web 浏览 器 加 载 HTML 文档 之 后 才 会 触发 load 事件 。 此 时 ， 不 
仅 HTML 文档 树 中 的 所 有 元 素 对 象 都 在 DOM 中 ， 而 且 所 有 图 片 、 超 链接 以 及 JavaScript 
也 都 被 Web 浏览 器 加 载 。 所 以 ， 除 全 局 变量 的 定义 及 赋 初 值 外 ，JavaScript 的 执行 ( 包括 
对 自 定 义 JavaScript 函数 的 调用 ) 都 应 该 从 执行 load 事件 处 理 函 数 开 始 。 

@ 为 了 更 好 地 实现 “内 容 和 结构 与 行为 的 分 离 ”， 可 以 将 全 局 变量 的 定义 及 赋 初 
值 、 自 定义 JavaScript 函数 ( 包括 事件 处 理 函 数 ) 的 声明 、 将 事件 处 理 函 数 赋值 给 某 一 元 
素 对 象 的 相关 属性 等 所 有 JavaScript 均 放置 在 HTML 文档 头 部 的 script 元 素 内 。 
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(4 在 网 页 上 漂浮 的 图 片 链接 


使 用 相对 定位 和 绝对 定位 技术 以 及 JavaScript， 不 仅 可 以 产生 文本 在 网 页 上 移动 的 动 


画 效 果 ， 同 样 可 以 使 图 片 在 网 页 上 移动 或 漂浮 ， 并 且 在 图 片上 还 可 以 创建 超 链接 一 一 


鼠标 单 击 图 片 时 ， 可 以 使 用 Web 浏览 器 打开 所 链接 的 网 页 。 


14.5. 


1 ”从 左 向 右 移动 的 图 片 链 接 


当 用 





首先 ， 制 作 在 网 页 上 从 左 向 右 水 平移 动 的 图 片 ， 并 在 图 片上 创建 超 链接 一 一 当 用 鼠 


标 单 击 图片 时 ， 可 以 使 用 Web 浏览 器 打开 所 链接 的 网 页 。 





时 ， 可 以 让 图 片 停止 移动 ， 当 鼠标 指针 离开 图 片 时 ， 又 可 以 让 图 片 继续 移动 。 
【 例 14-8】 从 左 向 右 移动 的 图 片 链接 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 


"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 


<html xmlns="http://www.w3.0rg/1999/zxhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 


<title> 从 左 向 右 移动 的 图 片 链接 </tit1le> 
<script type="text/javascript"> 
// 首 先 定义 如 下 一 些 全 局 变量 


Var x=50, y=60; /7 设置 图 片 的 初始 位 置 ， 并 记录 图 片 的 下 一 个 位 置 (x，y) 


var step=1; // 控 制图 片 每 次 移动 的 像素 数 
var speed=10; // 控 制图 片 的 移动 速度 
var divElement; // 包 含 超 链接 及 图 片 的 div 元 素 


function movePicture() { 

// 设 置 图 片 新 的 水 平 位 置 ， 即 水 平移 动 图 片 

divElement .style.left=x+"px"; 

x=x+step; // 计 算 图 片 水 平移 动 的 下 一 个 位 置 
} 


window.onload=function() { // 当 Web 浏览 器 加 载 HTML 文档 时 
var timerID; // 定 时 器 ID 


// 一 次 性 获取 包含 超 链接 及 图 片 的 div 元 素 


divElement=document .getElementById ("divPicture"); 


// 鼠 标 滑 过 图 片 时 ， 让 图 片 停止 移动 
// 将 匿名 函数 赋值 给 div 元 素 对 象 的 onmouseover 属性 





divElement .onmouseover=function() { clearInterval (timerID) 


此 外 ， 当 鼠标 指针 滑 过 图 片 
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// 鼠 标 离开 图 片 时 ， 让 图 片 继续 移动 

// 将 匿名 函数 赋值 给 div 元 素 对 象 的 onmouseout 属性 

divElement .onmouseout=function() { 
timerID=setInterval ("movePicture()",speed); 

}; 


// 每 隔 speed 毫秒 执行 一 次 movePicture () 
timerID=setInterval ("movePicture()", speed); 
} 
</script> 
</head> 
<body> 
<div id="divPicture" style="position:absolute"> <!-- 绝 对 定位 div 元 素 --> 
<a href="http://www.sina.com"><img src="sinaLogo.gif" alt=""/></a> 
</div> 
</body> 
</html> 


在 HTML 文档 主体 ， 使 用 行内 样式 style="position:absolute" 对 id 属性 值 为 divPicture 
的 div 元 素 进行 绝对 定位 ， 并 且 在 该 div 元 素 中 嵌入 创建 有 超 链接 的 图 片 。 

在 HIML 文档 头 部 的 JavaScript 中 ， 全 局 变量 x 和 y 用 于 设置 并 控制 div 元 素 盒子 在 
网 页 中 的 位 置 ， 全 局 变量 step 用 于 控制 图 片 每 次 移动 的 像素 数 ， 全 局 变量 speed 用 于 控制 
图 片 的 移动 速度 ， 全 局 变量 divElement 指 代 id 属性 值 为 divPicture、 且 包含 超 链接 及 图 片 
的 div 元 素 。 

在 自 定义 movePicture 函数 中 ， 首 先 根据 全 局 变量 x 的 最 新 值 调整 图 片 在 网 页 中 的 水 
平 位 置 ， 然 后 按照 全 局 变量 step 指定 的 像素 步 长 增加 全 局 变量 x 的 值 。 

当 Web 浏览 器 加 载 HTML 文档 时 ， 将 调用 匿名 的 load 事件 处 理 函 数 。 在 该 匿名 函数 
中 ， 第 1 条 语句 首先 通过 document 对 象 调用 getElementById 方法 获取 id 属性 值 为 
divPicture 的 div 元 素 对 象 ， 然 后 将 其 赋值 给 全 局 变量 divElement， 该 变量 即 指 代 id 属性 值 
为 divPicture 的 div 元 素 。 第 2 条 语句 将 匿名 函数 赋值 给 div 元 素 对 象 的 onmouseover 属 
性 一 一 在 div 元 素 对 象 的 onmouseover 属性 上 设置 mouseover 事件 处 理 函 数 ， 因 此 ， 当 鼠 
标 滑 过 图 片 时 会 清除 Interval 定时 器 ， 这 样 可 以 停止 图 片 的 移动 。 第 3 条 语句 将 匿名 函数 
赋值 给 div 元 素 对 象 的 onmouseout 属性 一 一 在 div 元 素 对 象 的 onmouseout 属性 上 设置 
mouseout 事件 处 理 函 数 ， 因 此 ， 当 鼠标 离开 图 片 时 会 通过 调用 setInterval 方法 重新 周期 性 
地 调用 movePicture 函数 ， 这 样 可 以 让 图 片 重新 开始 移动 。 执 行 第 4 条 语句 ， 通 过 Interval 
定时 器 周期 性 调用 movePicture 函数 ， 这 样 可 以 产生 “图 片 从 左 向 右 移 动 ” 的 动画 效果 ， 
该 语句 还 将 setInterval 方法 返回 的 定时 器 ID 赋值 给 局 部 变量 timerID。 


14.5.2 ”治水 平方 向 来 回 移动 的 图 片 链接 











在 前 例 中 ， 利 用 Interval 定时 器 能 够 周期 性 调用 movePicture 函数 。 每 次 调用 
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movePicture 函数 时 ， 都 是 按照 变量 step 指定 的 像素 步 长 增加 变量 x 的 值 ， 所 以 图 片 会 一 直 
向 右 移动 ， 直 至 移出 Web 浏览 器 窗口 的 右边 界 。 

如 果 当 图 片 移动 到 Web 浏览 器 窗口 的 右边 界 时 ， 能 够 按照 变量 step 指定 的 像素 步 长 不 
断 地 减少 变量 x 的 值 ， 这 样 图 片 就 会 开始 向 左 移动 而 当 图 片 移动 到 Web 浏览 器 窗口 的 左 
边界 时 ， 又 能 够 按照 变量 step 指定 的 像素 步 长 不 断 地 增加 变量 x 的 值 ， 这 样 图 片 就 又 会 开 
双向 右 移动 …… 即 可 在 Web 浏览 器 窗口 内 产生 “图 片 沿 水 平方 向 来 回 移 动 ” 的 动画 
效果 。 

【 例 14-9】 沿 水 平方 向 来 回 移动 的 图 片 链接 。 本 例 在 前 例 基础 上 增加 了 一 些 代码 ， 增 
加 的 代码 用 下 画 线 标注 ， 并 且 省 略 了 与 前 例 相同 的 大 部 分 代码 ，XHTML 及 JavaScript 代 


码 如 下 : 
<!DOCTYPE .… 
<html .… 
<head> 
<title> 沿 水 平方 向 来 回 移动 的 图 片 链接 </title> 


<script type="text/javascript"> 
var divElement; // 包 含 超 链 接 及 图 片 的 div 元 素 


// 变 量 moveRight 用 于 判断 并 控制 图 片 的 水 平移 动 方向 
//moveRight 为 true, 表示 图 片 应 向 右 移 动 : moveRight 为 false， 表 示 图 片 应 向 左 移动 
var moveRight=true; 


// 设 置 图 片 的 水 平移 动 区 间 
var leftBound=0; // 将 Web 浏览 器 窗口 的 左 端 设置 为 图 片 可 以 到 达 的 最 左 端 
var rightBound; // 图 片 可 以 到 达 的 最 右 端 


function movePicture() { 
// 设 置 图 片 新 的 水 平 位 置 ， 即 水 平移 动 图 片 


ee style. TOs pe 





X= ee 二 二 





if (x>rightBound) moveRight=false; // 判 断 是 否 改 变 图 片 的 水 平移 动 方 向 
else if (x<leftBound) moveRight=true; 
} 








window.onresize=function() { // 当 改变 Web 浏览 器 窗口 大 小 时 
// 调 整 图 片 可 以 到 达 的 最 右 端 位 置 
rightBound=document .documentElement.clientwidth-divElement- 
offsetwidth; 











if (x>rightBoungd) x=rightBoungd; // 直 接 将 图 片 移动 到 新 的 最 右 端 位 置 
+ 
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window.onload=function() {  // 当 Web 浏览 器 加 载 HTML 文档 时 


// 浏 览 器 窗口 的 宽度 (clientwigth) 减 去 div 元 素 对 象 占据 的 空间 宽度 (offsetwigth) 
// 就 是 图 片 可 以 到 达 的 最 右 端 位 置 
rightBound=document .documentElement .clientWidth-divElement .offsetWwidth; 








// 每 隔 speed 毫秒 执行 一 次 movePicture () 
timerID=setInterval ("movePicture()",speed); 
} 
</script> 
</head> 
<body> 


</body> 

</html> 

相对 于 前 例 ， 在 本 例 的 JavaScript 中 增加 了 全 局 变量 moveRight、leftBound 和 rightBound。 

变量 moveRight 用 于 判断 并 控制 图 片 的 水 平移 动 方向 。moveRight 为 tue， 表 示 图 片 应 
该 向 右 移动 ，moveRight 为 false， 表 示 图 片 应 该 向 左 移 动 。 

变量 leftBound 和 rightBound 用 于 设置 图 片 的 水 平移 动 区 间 ， 其 中 变量 leftBound 表示 
图 片 可 以 到 达 的 最 左 端 ， 变 量 rightBound 表示 图 片 可 以 到 达 的 最 右 端 。 

在 movePicture 函数 中 ， 首 先 根据 变量 x 的 最 新 值 调整 图 片 在 网 页 中 的 水 平 位 置 ， 然 
后 使 用 条 件 运算 符 ， 并 根据 变量 moveRight 的 值 计 算 图 片 的 下 一 个 水 平 位 置 ， 最 后 当 图 片 
移动 到 最 左 端 或 最 右 端 时 改变 变量 moveRight 的 值 。 这 样 ， 通 过 Interval 定时 器 周期 性 调 
用 movePicture 函数 ， 即 可 在 Web 浏览 器 窗口 内 产生 “图 片 沿 水 平方 向 来 回 移 动 ” 的 动画 
效果 。 

此 外 ， 将 一 个 匿名 函数 赋值 给 window 对 象 的 onresize 属性 。 这 样 ， 当 改变 Web 浏览 
器 窗口 大 小 时 ， 将 调用 匿名 的 resize 事件 处 理 函 数 。 在 该 匿名 函数 中 ， 第 1 条 语句 重新 计 
算 图 片 可 以 达到 的 最 右 端 位 置 ( 即 变量 rightBound 的 值 )。 执 行 第 2 条 语句 ， 可 以 当 图 片 
已 经 超过 新 的 最 右 端 位 置 时 ， 直 接 将 图 片 移动 到 新 的 最 右 端 位 置 。 


14.5.3 在 Web 浏览 器 窗口 内 漂浮 的 图 片 链接 


在 前 例 中 ， 图 片 能 够 沿 水 平方 向 来 回 移动 ， 并 且 当 改变 Web 浏览 器 窗口 大 小 时 还 可 
以 调整 图 片 的 水 平移 动 区 间 。 如 果 在 图 片 沿 水 平方 向 来 回 移动 的 同时 ， 不 断 地 调整 图 片 在 
垂直 方向 的 位 置 , 并 将 图 片 的 垂直 位 置 控制 在 Web 浏览 器 窗口 的 顶端 和 底 端 之 间 ， 即 可 产 
生 “ 图 片 在 Web 浏览 器 窗口 内 漂浮 ”的 动画 效果 。 

【 例 14-10】 在 Web 浏览 器 窗口 内 漂浮 的 图 片 链接 。 本 例 在 前 例 基础 上 增加 了 一 些 代 
码 ， 增 加 的 代码 用 下 画 线 标注 ， 并 且 省 略 了 与 前 例 相 同 的 大 部 分 代码 ，XHTML 及 
JavaScript 代码 如 下 : 


<!DOCTYPE ... 
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<html .. 
<head> 


<title> 在 Web 浏览 器 窗口 内 漂浮 的 图 片 链接 </title> 
<script type="text/javascript"> 





Var moveRight=true; 


/人 /变量 moveDown 用 于 判断 并 控制 图 片 的 冬 直 移动 方向 





//moveDown 为 true， 表 示 图 片 应 向 下 移动 ， moveDown 为 false， 表 示 图 片 应 向 上 移动 


Var moveDown=true; 





var leftBound=0; // 将 Web 浏览 器 窗口 的 左 端 设 置 为 图 片 可 以 到 达 的 最 左 端 
var rightBound; // 图 片 可 以 到 达 的 最 右 端 
Var topBound=0; _// 将 Web 浏览 器 窗口 的 项 端 设置 为 图 片 可 以 到 达 的 最 项 端 
var bottomBound; // 图 片 可 以 到 达 的 最 底 端 





function movePicture() { 


if (x>rightBound) moveRight=false; // 判 断 是 否 改变 图 片 的 水 平移 动 方向 
else if (x<leftBound) moveRight=true; 


/7 设置 图 片 新 的 冬 直 位 置 ， 即 徘 直 移动 图 片 
divElement .style.top=y+"px"; 

计算 图 片 垂直 移动 的 下 一 个 位 置 ， 每 次 
Y=Yy+step* (moveDown?1:-1); 
if (y>bottomBound) moveDown=false; 7// 判 断 是 否 改变 图 片 的 冬 直 移动 方向 


else if (y<topBound) moveDown=true; 
} 





window.onresize=function() { // 当 改变 Web 浏览 器 窗口 大 小 时 


if (x>rightBound) x=rightBound; // 直 接 将 图 片 移动 到 新 的 最 右 端 位 置 
图 片 可 以 到 达 的 最 底 端 位 置 
bottomBound=document .documentElement .clientHeight-divElement. 


offsetHeight; 
if (y>bottomBound) y=bottomBound; // 直 接 将 图 片 移动 到 新 的 最 底 端 位置 








window.onload=function() {  // 当 Web 浏览 器 加 载 HTML 文档 时 


rightBound=document .documentElement .clientWidth-divElement. 
offsetWidth7 


// 浏 览 器 窗口 的 高 度 (clientHeight) 减 去 div 元 素 对 象 占据 的 空间 高 度 (offsetHeight) 
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// 就 是 图 片 可 以 到 达 的 最 底 端 位 置 


bottomBound=document .documentElement .clientHeight-divElement. 


offsetHeight; 








// 每 隔 speed 毫秒 执行 一 次 movePicture () 
timerID=setInterval ("movePicture()",speed); 
} 
</script> 
</head> 
<body> 


</body> 

</html> 

相对 于 前 例 ， 在 本 例 的 JavaScript 中 增加 了 全 局 变量 moveDown、topBound 和 
bottomBound 。 

变量 moveDown 用 于 判断 并 控制 图 片 的 垂直 移动 方向 。moveDown 为 tue， 表 示 图 片 
应 该 向 下 移动 ，moveDown 为 false， 表 示 图 片 应 该 向 上 移动 。 

变量 topBound 和 bottomBound 用 于 设置 图 片 的 垂直 移动 区 间 ， 其 中 变量 topBound 表 
示 图 片 可 以 到 达 的 最 顶端 ， 变 量 bottomBound 表示 图 片 可 以 到 达 的 最 底 端 。 

全 局 变量 topBound、rightBound、bottomBound 和 leftBound 共同 构成 了 图 片 可 在 其 中 
漂浮 的 矩形 区 域 。 

在 movePicture 函数 中 增加 的 JavaScript 能 够 实现 以 下 功能 : 首先 根据 变量 y 的 最 新 值 
调整 图 片 在 网 页 中 的 垂直 位 置 ， 然 后 使 用 条 件 运算 符 ， 并 根据 变量 moveDown 的 值 计算 图 
片 的 下 一 个 垂直 位 置 ， 最 后 当 图 片 移动 到 最 顶端 或 最 底 端 时 改变 变量 moveDown 的 值 。 

这 样 ， 在 movePicture 函数 中 ， 既 能 同时 调整 图 片 在 水 平和 垂直 方向 上 的 位 置 ， 又 能 
将 图 片 的 移动 范围 控制 在 一 个 可 动态 变化 的 矩形 区 间 〈 即 Web 浏览 器 窗口 ) 内 。 因 此 ， 通 
过 Interval 定时 器 周期 性 调用 movePicture 函数 ， 可 以 产生 “图 片 在 Web 浏览 器 窗口 内 漂 
浮 ” 的 动画 效果 。 

当 改 变 Web 浏览 器 窗口 大 小 时 ， 将 调用 匿名 的 resize 事件 处 理 函 数 。 在 该 匿名 函数 中 
增加 的 JavaScript 可 以 重新 计算 图 片 可 以 到 达 的 最 底 端 位 置 〈 即 变量 bottomBound 的 值 ); 
当 图 片 已 经 超过 新 的 最 底 端 位 置 时 ， 直 接 将 图 片 移动 到 新 的 最 底 端 位 置 。 


(4 自动 切换 的 图 片 





浏览 网 页 时 ， 经 常 可 以 看 到 在 一 个 矩形 框 中 嵌入 了 一 组 可 以 自动 切换 的 图 片 。 如 图 
14-6 所 示 ， 这 种 图 片 框 主要 由 以 下 几 个 各 具 一 定 功 能 的 要 素 组 成 。 

(1) 一 组 自动 切换 的 图 片 。 在 图 片 框 中 包含 一 组 可 以 自动 切换 ， 并 循环 播放 的 图 片 ， 
每 张 图 片 位 于 图 片 框 的 中 央 并 占 满 整个 图 片 框 。 一 般 情况 下 ， 每 隔 儿 秒 钟 会 从 一 张 图 片 自 
动 切换 到 另 一 张 图 片 。 当 鼠标 滑 过 某 张 图 片 时 ， 图 片 切换 会 暂停 ， 这 时 将 静止 显示 这 张 图 
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片 。 当 鼠标 离开 这 张 图 片 时 ， 图 片 的 自动 切换 又 将 继续 。 

(2) 数字 按钮 组 。 数 字 按 钮 组 位 于 图 片 框 内 侧 的 左下 方 ， 其 中 的 每 个 数字 按钮 对 应 一 
张 图 片 ， 随 着 图 片 的 自动 切换 ， 对 应 数字 按钮 的 字体 颜色 或 背景 颜色 会 发 生 改变 。 当 单 击 
某 个 数字 按钮 时 ， 在 图 片 框 中 会 立即 切换 到 相应 的 图 片 ， 并 且 对 应 数字 按钮 的 字体 颜色 或 
背景 颜色 也 会 相应 地 改变 。 

(3) 图 片 标题 。 图 片 标题 位 于 图 片 框 内 侧 的 左上 方 。 自 动 切换 的 每 张 图 片 都 有 一 个 对 
应 的 标题 ， 随 着 图 片 的 自动 切换 ， 对 应 的 标题 文字 会 发 生 改变 。 











图 片 标题 


自动 切换 
的 图 片 





图 14-6 图 片 框 的 结构 及 要 素 
以 下 将 逐步 构造 图 片 框 中 的 各 个 要 素 ， 并 在 每 个 要 素 中 实现 相应 的 功能 。 


14.6.1 赃 入 自动 切换 的 图 片 


首先 ， 在 图 片 框 中 嵌入 一 组 可 以 自动 切换 、 并 循环 播放 的 图 片 。 当 鼠标 滑 过 某 张 图 
片 时 ， 图 片 切换 会 暂停 ， 这 时 将 静止 显示 这 张 图 片 。 当 鼠标 离开 这 张 图 片 时 ， 图 片 的 自动 
切换 又 将 继续 。 

【 例 14-11】 自动 切换 的 图 片 。XHTML、CSS 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 自 动 切换 的 图 片 </title> 
<style type="text/css"> 
#box { position:relative; border:lpx solid black; } /* 图 片 框 */ 
#box>a>img { border-width:0px; overflow:hidden; } /* 图 片 */ 
</style> 
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<script type="text/javascript"> 
// 首 先 定义 如 下 一 些 全 局 变量 


var boxWidth=500; // 图 片 框 宽度 (参照 图 片 宽度 ， 并 取 其 中 最 小 值 ) 

var boxHeight=341; / /图片 框 高 度 (参照 图 片 高 度 ， 并 取 其 中 最 小 值 》 

Var image=new Array ("pic01.jpg","pic02.jpg", "pic03.jpg", "pic04.jpg"); 
// 图 片 


var link=["http://www.sina.com", "http://www.baidu.com", 
"http://www.sohu.com", "http://www.qq.com"];  // 图 片 超 链接 


var interval=2000; // 每 张 图 片 延 时 时 间 (毫秒 ) 

var pictureIndex=0; // 在 正常 情况 下 将 要 显示 的 图 片 的 编号 ， 从 0 开始 
var imageElement; // 插 入 图 片 的 img 元 素 

var linkElement; // 图 片上 的 超 链 接 a 元 素 


function changePicture (PictureID) { 
imageElement . src=image [PictureID]7 // 更 换 图 片 
linkElement .href=1link[PictureID]; // 更 换 图 片 超 链接 
PictureIndex= (pictureID+1)%4; 

} 


window.onload=function() { //1oad 事件 处 理 函 数 
var timerID;  //Interval 定时 器 ID 
// 设 置 图 片 框 的 宽度 和 高 度 
Var boxElement=document .getElementById ("box"); 
boxElement .style.width=boxWidth+"px"; 
boxElement .style.height=boxHeight+"px"; 


// 一 次 性 获取 插入 图 片 的 img 元 素 

imageElement=document .getElementById ("picture"); 

// 设 置 图 片 的 宽度 和 高 度 

imageElement.style.width=boxWidth+"px"; 

imageElement .style.height=boxHeight+"px"; 

// 鼠 标 滑 过 图 片 时 ， 暂 停 图 片 切换 

imageElement .onmouseover=function() { clearInterval (timerID); } 

// 鼠 标 离开 图 片 时 ， 继 续 图 片 自动 切换 

imageElement .onmouseout=function () { 
timerID=setInterval ("changePicture (pictureIndex)",interval); 


// 一 次 性 获取 图 片上 的 超 链接 a 元 素 


linkElement=document .getElementById ("linkURL"); 


changePicture (pictureIndex); // 去 掉 这 条 语句 会 有 什么 效果 ? 为 什么 ? 
// 每 隔 interval 毫秒 调用 一 次 changePicture 
timerID=setInterval ("changePicture (PictureIndex)",interval) 7 
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</script> 
</head> 
<body> 
<div id="box"> <!-- 图 片 框 ， 仅 包括 图 片 及 超 链接 --> 
<a dlinEOR hrof=""><ing id="picture”" SFC=nw alt=*"/></aS> < ==- 图 
片 及 超 链接 --> 
</div> 
</body> 
</html> 


在 HTML 文档 主体 ，id 属性 值 为 box 的 div 元 素 定 义 了 一 个 图 片 框 。 在 该 div 元 素 中 
使 用 img 元 素 可 以 在 图 片 框 内 嵌入 图 片 ， 在 图 片上 还 可 以 使 用 a 元素 创建 超 链接 。 

在 HIML 文档 头 部 定义 的 内 部 样式 表 中 ,第 2 条 CSS 规则 中 的 特性 声明 
overflow:hidden 能 够 对 嵌入 img 元 素 盒子 的 图 片 进行 截取 当 图 片 的 尺寸 (宽度 或 高 度 ) 
大 于 img 元 素 盒 子 的 尺寸 〈 宽 度 或 高 度 ) 时 ， 图 片 的 多 余部 分 会 被 隐藏 。 

在 HIML 文档 头 部 的 JavaScript 中 定义 了 一 些 全 局 变量 ， 并 对 其 中 的 一 些 变量 赋 了 初 
值 。 变 量 boxWidth 和 boxHeight 用 于 设置 图 片 框 的 宽度 和 高 度 ，Array 对 象 变量 image 用 
于 存储 一 组 图 片 的 文件 名 ，Array 对 象 变量 link 用 于 存储 每 张 图 片 对 应 的 超 链 接 ， 变 量 
interval 用 于 设置 每 张 图 片 的 延 时 时 间 〈 以 毫秒 计 ) ; 变量 pictureIndex 用 于 设置 将 要 显示 
的 图 片 的 编号 ， 第 1 张 图 片 的 编号 是 0， 第 2 张 图 片 的 编号 是 1，…… ， 第 ntl 张 图 片 的 
编号 是 n; 变量 imageElement 属于 object 类 型 ， 指 代 HTML 文档 树 中 id 属性 值 为 picture 
的 img 元 素 对 象 ， 类似 地 ， 变 量 linkElement 也 属于 object 类 型 ， 指 代 HTML 文档 树 中 id 
属性 值 为 linkURL 的 a 元 素 对 象 。 在 后 面 定义 的 函数 内 部 可 以 引用 或 重新 赋值 这 些 全 局 
变量 。 

在 HIML 文档 头 部 的 JavaScript 中 还 定义 了 changePicture 函数 。 在 changePicture 函数 
中 ， 首 先 通过 由 变量 imageElement 指 代 的 img 元 素 对 象 的 src 属性 动态 地 更 换 img 元 素 盒 
子 内 的 图 片 ， 然 后 通过 由 变量 linkElement 指 代 的 a 元 素 对 象 的 href 属性 动态 地 改变 图 片上 
的 超 链 接 ， 最 后 通过 代码 pictureIndex=(pictureID+1)%4 使 变量 pictureIndex 指向 在 正常 情 
况 下 将 要 显示 的 下 一 张 图 片 。 

当 Web 浏览 器 加 载 HTML 文档 时 ， 将 调用 匿名 的 load 事件 处 理 函 数 。 在 该 匿名 函数 
中 ， 首 先 根据 全 局 变量 boxWidth 和 boxHeight 设置 图 片 框 以 及 img 元 素 盒子 〈 即 图 片 ) 的 
宽度 和 高 度 。 在 该 匿名 函数 中 ， 还 使 用 setnterval 方法 设置 了 Interval 定时 器 ， 这 样 每 隔 一 
段 时 间 即 可 调用 一 次 changePicture 函数 ， 该 函数 的 形式 参数 pictureID 代表 即将 显示 的 图 
片 的 编号 。 由 于 在 通过 Interval 定时 器 第 1 次 调用 changePicture 函数 之 前 需要 一 定 的 时 
间 ， 所 以 在 使 用 setInterval 方法 设置 Interval 定时 器 之 前 ， 专 门 调用 了 一 次 changePicture 
函数 。 这 样 可 以 使 第 1 张 图 片 的 显示 与 之 后 的 图 片 自动 切换 ， 连 贯 地 执行 。 

在 匿名 的 load 事件 处 理 函 数 中 ， 还 对 由 变量 imageElement 指 代 的 img 元 素 对 象 的 
onmouseover 和 onmouseout 属性 分 别 赋值 了 两 个 匿名 函数 。 这 样 ， 当 鼠标 滑 过 img 元 素 盒 
子 内 的 图 片 时 ， 将 在 img 元 素 上 触发 mouseover 事件 ， 进 而 调用 clearInterval 方法 并 清除 
Interval 定时 器 ， 这 样 可 以 中 断 对 changePicture 函数 的 周期 性 调用 ， 从 而 暂停 图 片 切换 ; 


























而 当 
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鼠标 离开 img 元 素 盒子 内 的 图 片 时 ， 将 在 img 元 素 上 触发 mouseout 事 件 ， 进 而 重新 调 


用 setInterval 方法 并 设置 Interval 定时 器 ， 这 样 可 以 再 次 开始 周期 性 调用 changePicture 函 


数 ， 

14. 
左下 
数字 


代码 
码 如 


从 而 继续 使 图 片 自动 切换 。 
6.2 自动 切换 的 图 片 及 数字 按钮 组 


在 前 例 的 图 片 框 中 仅 嵌 入 一 组 自动 切换 并 循环 播放 的 图 片 ， 下 例 将 在 图 片 框 内 侧 的 
方 添加 数字 按钮 组 ， 其 中 的 每 个 数字 按钮 对 应 一 张 图 片 ， 随 着 图 片 的 自动 切换 ， 对 应 
按钮 的 背景 颜色 会 发 生 改变 。 

【 例 14-12】 自动 切换 的 图 片 及 数字 按钮 组 。 本 例 在 前 例 基 础 上 增加 了 一 些 代码 ， 增 加 的 





用 下 夯 线 标注 ， 并 且 省 略 了 与 前 例 相同 的 大 部 分 代码 ，XHTML、CSS 及 JavaScript 代 
下 

<!DOCTYPE .- 

<html .… 

<head> 


<title> 自 动 切换 的 图 片 + 数字 按钮 组 </tit1le> 

<style type="text/css"> 
#box { position:relative; border:lpx solid black; } /* 图 片 框 */ 
#box>a>img { border-width:0px; overflow:hidden; } /* 图 片 */ 


#buttonGroup { position:absolute; left:0px; bottom:0px; height:16px; 
background-color:silver; filter:alpha (opacity=60); /* 数字 按钮 组 */ 





#box>div>span { float:left; padding:0 8px; border-left:1px solid #ccc; 
background-color:gray; line-height:16px; font-size:16px; 
color:white; } /* 数字 按钮 */ 

</style> 
<script type="text/javascript"> 


var_buttonElements; _// 保 存 全 部 数字 按钮 的 数组 
function changePicture(pictureID) { 


人/ 突显 对 应 数字 按钮 的 背景 颜色 
buttonElements [pictureID] .style.backgroundColor="red"; 
// 对 于 某 些 Web 浏览 器 ， 可 以 不 要 下 一 条 语句 


buttonElements [pictureID] .innerText=pictureID+17 











var previousPictureIndex= (pictureIndex==0) ?3: (PictureIndex-1) 7 
// 还 原 前 一 个 数字 按钮 的 背景 颜色 
buttonElements [previousPictureIndex] -Style :backgroundColor="gray" 六 
pictureIndex= (PictureID+1) 当 47 
} 











window.onload=function() {  //1oad 事件 处 理 函 数 


linkElement=document .getElementById ("linkURL"); 
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/ /设置 数字 按钮 组 的 宽度 

Var groupElement=document .getElementById ("buttonGroup"); 
groupElement .style.width=boxWidth+"px"; 

// 一 次 性 获取 保存 全 部 数字 按钮 的 数组 


buttonElements=document .getElementsByTagName ("span"); 














} 
</script> 
</head> 
<body> 
<div id="box"> <!-- 图 片 框 ， 包 括 图 片 链接 和 数字 按钮 组 --> 
<a id="linkURL" href=""><img id="picture" src="" alt=""/></a> <!-- 图 
片 及 超 链接 --> 
<div id="buttonGroup"> 《<!-- 数字 按钮 组 --> 
<span>1</span> <!-- 数字 按钮 --> 
<span>2</span> <!-- 数字 按钮 --> 
<span>3</span> 《<!-- 数字 按钮 --> 
<span>4</span> <!-- 数字 按钮 --> 
</div> 
</div> 
</body> 
</html> 
同 前 列 一 样 ， 在 HIML 文档 主体 ，id 属性 值 为 box 的 div 元 素 定 义 了 一 个 图 片 框 。 此 
外 ， 在 图 片 框 中 ， 增 加 的 id 属性 值 为 buttonGroup 的 div 元 素 定义 了 数字 按钮 组 ， 在 数字 
按钮 组 中 ， 又 使 用 四 个 span 元 素 定义 了 四 个 数字 按钮 。 这 样 ， 在 图 片 框 中 既 包 括 图 片 及 
超 链接 ， 又 包括 数字 按钮 组 。 
在 HIML 文档 头 部 定义 的 内 部 样式 表 中 ， 第 3 条 CSS 规则 中 的 特性 声明 position:absolute 
能 够 对 id 属性 值 为 buttonGroup 的 div 元 素 盒子 进行 绝对 定位 ， 以 便 将 数字 按钮 组 置 于 图 
片 框 内 侧 的 左下 方 。 另 一 方面 ，id 属性 值 为 box 的 div 元 素 是 id 属性 值 为 buttonGroup 的 
div 元 素 的 父 元 素 。 因 此 ， 需 要 在 第 1 条 CSS 规则 中 使 用 特性 声明 position:relative 对 id 属 
性 值 为 box 的 div 元 素 盒子 进行 相对 定位 ; 否则 ，id 属性 值 为 buttonGroup 的 div 元 素 ( 子 
元 素 ) 无 法 以 id 属性 值 为 box 的 div 元 素 〈 父 元 素 ) 为 基准 进行 绝对 定位 。 
第 3 条 CSS 规则 中 的 特性 声明 bottom:0px 能 够 使 数字 按钮 组 的 底 边 与 图 片 框 的 底 边 
完全 吻合 。 
第 3 条 CSS 规则 中 的 特性 声明 filter:alpha(opacity=60) 可 以 产生 滤 镜 (Filter) 效果 ， 使 
得 “图 片 ” 对 “数字 按钮 组 ”具有 一 定 的 穿 透 力 能 够 透 过 “数字 按钮 组 ”看 到 “图 
片 ”。 其 中 参数 opacity 的 数值 越 小 “图片 ”对 “数字 按钮 组 ”的 穿 透 力 越 强 ;相反 ， 
参数 opacity 的 数值 越 大 ，“ 图 片 ” 对 “数字 按钮 组 ”的 穿 透 力 越 弱 。 
第 4 条 CSS 规则 中 的 特性 声明 float:left 能 够 使 每 个 数字 按钮 向 左 浮动 ， 并 使 后 一 个 
数字 按钮 排列 在 前 一 个 数字 按钮 的 右 侧 。 
在 HTML 文档 头 部 增加 的 JavaScript 中 ， 新 定义 了 全 局 变量 buttonElements。 实 际 上 ， 
变量 buttonElements 也 是 一 个 Array 对 象 变量 ， 且 用 于 保存 全 部 数字 按钮 对 应 的 四 个 span 
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在 函数 changePicture 中 ， 形 式 参数 pictureID 代表 即将 显示 的 图 片 的 编号 ， 局 部 变量 
previousPictureIndex 代表 刚刚 显示 过 的 前 一 张 图 片 的 编号 。 在 该 函数 中 增加 的 JavaScript 
能 够 将 当前 图 片 对 应 的 数字 按钮 的 背景 颜色 设置 为 红色 ， 并 将 前 一 张 图 片 对 应 的 数字 按钮 
的 背景 颜色 还 原 为 灰色 。 这 样 ， 随 着 图 片 的 自动 切换 ， 对 应 数字 按钮 的 背景 颜色 也 会 发 生 

在 匿名 的 load 事件 处 理 函数 中 , 增加 的 JavaScript 能 够 根据 全 局 变量 boxWidth 的 值 设 
置 数字 按钮 组 的 宽度 ， 并 与 图 片 框 和 图 片 的 宽度 完全 一 致 。 此 外 ， 还 将 全 部 数字 按钮 对 应 
的 四 个 span 元 素 对 象 保存 于 全 局 变量 buttonElements 中 。 


14.6.3 自动 切换 的 图 片 、 数 字 按 钮 组 及 数字 按钮 click 事件 




















在 下 例 中 将 增加 新 的 功能 一 一 当 单 击 某 个 数字 按钮 时 ， 在 图 片 框 中 会 立即 切换 到 相 
应 的 图 片 ， 并 且 对 应 数字 按钮 的 背景 颜色 也 会 相应 地 改变 。 

【 例 14-13】 自动 切换 的 图 片 、 数 字 按 钮 组 及 数字 按钮 click 事件 。 本 例 在 前 例 基础 上 
增加 了 一 些 代码 ， 增 加 的 代码 用 下 画 线 标注 ， 并 且 省 略 了 与 前 例 相 同 的 大 部 分 代码 ， 
XHTML、CSS 及 JavaScript 代码 如 下 : 








<!DOCTYPE .… 
<html ... 
<head> 
件 </title> 
<script type="text/javascript"> 
var buttonElements; // 保 存 全 部 数字 按钮 的 数组 
window.onload=function() { //1oad 事件 处 理 函数 


buttonElements=document .getElementsByTagName ("span"); 
for (Var i=0;i<buttonElements.length;i++) 
击 数 字 按钮 时 ， 立 即 切换 到 相应 的 图 片 
buttonElements [1] .onclick=function() { 
clearInterval (timerID); 
Var newPictureIndex=this.innerText-1; 














changePicture (newPictureIndex); 





timerID=setIinterval ("changePicture (pictureIndex)", interval); 





} 
</script> 
</head> 
<body> 
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</body> 

</html> 

同 前 例 一 样 ， 在 HTML 文档 头 部 的 JavaScript 中 定义 的 全 局 变量 buttonElements 是 一 
个 Array 对 象 变量 ， 且 用 于 保存 全 部 数字 按钮 对 应 的 四 个 span 元 素 对 象 。 

在 匿名 的 load 事件 处 理 函 数 中 ， 增 加 的 JavaScript 实现 了 一 个 for 循环。 在 该 for 循环 
中 ， 依 次 对 每 个 span 元 素 对 象 的 onclick 属性 赋值 了 同一 个 匿名 函数 。 因 此 ， 该 匿名 函数 
就 成 为 “ 单 击 数字 按钮 ”的 click 事件 处 理 函数 。 

匿名 的 click 事件 处 理 函 数 中 的 程序 执行 过 程 如 下 : 

(1) 调用 clearInterval 方法 并 清除 Interval 定时 器 ， 这 样 可 以 中 断 对 changePicture 函 
数 的 周期 性 调用 ， 从 而 中 断 图 片 自动 切换 。 

(2) 根据 所 单 击 数字 按钮 对 应 的 span 元 素 对 象 的 innerText 属性 值 计 算 局 部 变量 
newPictureIndex 的 值 ， 变 量 newPictureIndex 即 可 代表 与 某 个 数字 按钮 相对 应 图 片 的 编号 。 

(3) 使 用 局 部 变量 newPictureIndex 作为 参数 单独 调用 一 次 changePicture 函数 ， 由 于 
变量 newPictureIndex 代表 与 某 个 数字 按钮 相对 应 图 片 的 编号 ， 所 以 可 以 立即 切换 到 相应 
的 图 片 ， 并 且 对 应 数字 按钮 的 背景 颜色 也 会 发 生 改变 。 

(4) 调用 setInterval 方法 并 设置 Interval 定时 器 ， 这 样 可 以 再 次 使 用 全 局 变量 
pictureIndex 周期 性 调用 changePicture 函数 ， 从 而 继续 使 图 片 自动 切换 。 


注意 : 本 例 中 的 数字 按钮 不 同 于 表单 中 的 按钮 一 一 本 例 中 的 数字 按钮 是 由 span 元 素 
定义 的 元 素 盒子 ， 而 表单 中 的 按钮 则 是 由 input 元 素 定义 的 控件 。 但 两 者 都 能 够 响应 click 
事件 ， 然 后 调用 相应 的 事件 处 理 函 数 。 


(14.7 表格 数据 隔行 变色 
































在 浏览 网 页 时 ， 有 时 可 以 看 到 包含 有 很 多 行 数据 的 表格 。 为 了 便于 浏览 者 识别 和 查 
阅 其 中 的 数据 ， 可 以 在 表格 的 数据 行 中 隔行 设置 不 同 的 背景 颜色 。 如 图 14-7 所 示 ， 可 以 
将 表格 头 中 列 标题 行 的 背景 颜色 设置 为 浅 灰 色 ， 而 将 表格 体 中 奇数 和 偶数 数据 行 的 背景 颜 
色 分 别 设置 为 浅黄 色 和 浅 绿色 。 此 外 ， 当 鼠标 滑 过 某 一 数据 行 时 ， 该 数据 行 的 背景 颜色 将 
变换 为 粉色 ， 当 鼠标 离开 该 数据 行 时 ， 其 背景 颜色 又 恢复 为 原 有 颜色 。 





ROSTER 
列 标题 行 一 >| Wame Birthday | Weight (ke) 浅 灰色 背景 
有 数 数 所 行 一 >| Janes 。 | Sep 16，1993 | 111 | 一 沁 英 色 冯 


i 2 





Sep 15, 1999 [60 | 


Nov 18, 1991 | 103 





Se Dec 30，1992 | 55 | 





图 14-7 ”表格 数据 隔行 变色 
【 例 14-14】 表格 数据 隔行 变色 。XHTML、CSS 及 JavaScript 代码 如 下 : 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 
<htm1l xmlns="http://www.w3.o0rg/1999/zxhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 表 格 隔 行 变色 </title> 
<style type="text/css"> 
table { border-collapse:collapse; margin:20px auto; } 
caption { color:purple; font-weight:bolder; } 
th, td { padding:2px 1l0px; border:lpx solid; } 
.oddstyle { background-color:1lightyellow; } /* 奇 数 数据 行 背景 颜色 */ 
.evenStyle { background-color:lightgreen; } /* 偶 数 数据 行 背景 颜色 */ 
tbody>tr:hover { background-color:pink; } 
</style> 
<script type="text/javascript"> 
window.onload=function() { 
Var rowArray=document .getElementsByTagName ('tr'); 


// 列 标题 行 对 应 的 tr 元 素 的 下 标 为 0 
rowArray[0] .style.background="lightgray"; // 设 置 列 标题 行 背景 颜色 
rowArray[0] .style.fontstyle="italic"; /7 设置 列 标题 行 字体 样式 


for (var i=1;i<rowArray.length;i++) // 数 据 行 对 应 的 tr 元素 的 下 标 从 1 开始 
if (i%2==1) rowArray[i].className='oddstyle'; 
else rowArray[i] .className='evenstyle'; 
} 
/seript> 
</head> 
<body> 
<table> 
<caption>ROSTER</caption> 
<thead> 
<tr> 
<th>Name</th><th>Birthday</th><th>Weight (kg) </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>James</td><td>Sep 16, 1993</td><td>111</td> 
Si 
<tr> 
<td>Tom</td><td>Nov 29, 1992</td><td>75</td> 
Se 
<tr> 
<td>Alice</td><td>Ssep 15, 1992</td><td>60</td> 
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<trES 
EE 
<td>Edward</td><td>Nov 18, 1991</td><td>103</td> 
</tr> 
Er 
<td>Catherine</td><td>Dec 30, 1992</td><td>55</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 


在 HIML 文档 主体 ，table、caption、thead、tbody、tr、 也 和 td 等 元 素 定 义 了 表格 的 
各 个 要 素 : table 定义 整个 表格 ，caption 定义 表格 的 标题 ，thead 定义 表格 头 ，tbody 定 义 表 
格 体 ， 红 定义 表格 行 ， 也 定义 表 头 单元 格 ，td 定义 数据 单元 格 。thead 元 素 中 的 tr 元素 定 义 
列 标题 行 ，tbody 元 素 中 的 tt 元素 定义 数据 行 。 

在 HTML 文档 头 部 定义 的 内 部 样式 表 中 ， 前 三 条 CSS 规则 定义 了 表格 及 其 标题 和 单 
元 格 的 一 般 样 式 。 第 4 条 和 第 5 条 CSS 规则 分 别 定义 了 奇数 和 偶数 数据 行 的 背景 颜色 。 第 
6 条 CSS 规则 在 表格 体 中 的 tr 元素 上 定义 了 hover 伪 类 一 一 这 样 ， 当 鼠标 滑 过 某 一 数据 行 
时 ， 该 数据 行 的 背景 颜色 将 变换 为 粉色 。 当 鼠标 离开 该 数据 行 时 ， 其 背景 颜色 又 变换 为 原 
有 颜色 。 

在 匿名 的 load 事件 处 理 函 数 中 ， 首 先 通过 document 对 象 调用 getElementsByTagName 
方法 获取 HTML 文档 树 中 的 六 个 tr 元 素 对 象 〈 包 括 表格 头 中 列 标题 行 对 应 的 tr 元 素 ， 即 
下 标 为 0 的 tt 元 素 )， 并 将 这 六 个 tr 元素 对 象 保存 在 Array 对 象 变量 rowArray 中 ; 然后 设 
置 表格 头 中 列 标题 行 的 背景 颜色 及 字体 样式 ， 最 后 在 for 循环 中 隔行 设置 数据 行 的 背景 颜 
色 样 式 。 

注意 : 为 了 确保 在 Web 浏览 器 完全 加 载 HTML 文档 之 后 再 执行 JavaScript， 除 全 局 变 
量 声 明和 自 定义 函数 外 ， 建 议 将 JavaScript 尽 可 能 地 组 织 在 onload 事件 处 理 函 数 内 。 


区 


DHTML 是 HIML、CSS、JavaScript 和 DOM 的 组 合 应 用 。 通 过 DHTML，JavaScript 
能 够 动态 地 访问 和 更 新 HIML 文档 的 内 容 、 结 构 以 及 表现 ， 可 以 控制 如 何在 Web 浏览 器 
中 显示 和 定位 HTML 元 素 。 

HTML 元 素 及 盒子 在 网 页 中 的 位 置 与 其 position 特性 密切 相关 。 默 认 情况 下 ，HIML 
元 素 的 position 特性 值 是 static。 此 时 ，HTML 元 素 及 盒子 按照 正常 流 或 浮动 方式 排列 。 此 
外 ，HTML 元 素 的 position 特性 值 还 可 以 是 absolute 或 relative， 即 在 网 页 中 对 HTML 元 素 
及 盒子 进行 绝对 定位 或 相对 定位 。 

绝对 定位 的 HIML 元 素 及 盒子 完全 脱离 正常 流 ， 并 且 对 其 他 元 素 及 盒子 的 定位 没有 


第 14 章 DHTML 39 


任何 影响 。 为 了 对 HTML 元 素 及 盒子 准确 地 进行 绝对 定位 ， 需 要 对 距离 该 HTML 元 素 尽 
可 能 近 的 某 个 先辈 元 素 进行 相对 定位 。 
CSS 具有 一 定 的 响应 鼠标 事件 的 行为 能 力 。 在 CSS 规则 的 选择 器 中 使 用 hover 和 active 

伪 类 ， 可 以 对 鼠标 操作 产生 类 似 mouseout、mouseover 和 click 事件 的 动态 效果 。 

对 于 绝对 定位 的 HTML 元 素 ， 可 以 在 CSS 规则 中 使 用 clip 特性 对 该 元 素 及 盒子 中 的 
内 容 进行 裁剪。 

除 全 局 变量 的 定义 及 赋 初 值 外 ，JavaScript 的 执行 (包括 对 自 定义 JavaScript 函数 的 调 
用 ) 都 应 该 从 执行 load 事件 处 理 函 数 开始 。 

为 了 更 好 地 实现 “内 容 和 结构 与 行为 的 分 离 ”， 可 以 将 全 局 变量 的 定义 及 赋 初 值 、 
自 定义 JavaScript 函数 〈 包 括 事件 处 理 函 数 ) 的 声明 、 将 事件 处 理 函 数 赋值 给 某 一 元 素 对 
象 的 相关 属性 等 所 有 JavaScript 均 放置 在 HTML 文档 头 部 的 script 元 素 内 。 


(43 习题 


1. 在 【 例 14-3】 的 内 部 样式 表 中 增加 一 条 CSS 规则 ， 使 得 当 用 鼠标 单 击 子 菜单 项 中 
的 文本 超 链接 时 ， 文 本 超 链接 的 颜色 变 为 蓝 色 ， 同 时 背景 颜色 变 为 黄色 。 

2， 在 【 例 14-6】 基 础 上 改写 JavaScript， 使 clipWindow 窗口 中 的 文本 可 以 垂直 滚动 
播放 。 

3. 在 【 例 14-13】 基础 上 并 参见 图 14-6， 在 图 片 框 内 侧 的 左上 方 为 每 张 图 片 增加 相应 
的 文字 标题 。 

4. 在 上 一 题 的 基础 上 ， 将 图 片 换 为 另外 一 组 尺寸 不 同 的 图 片 ， 并 为 每 张 图 片 配 上 相 
应 的 文字 标题 。 

5. 使 用 DHTML 技术 实现 如 下 网 络 营销 功能 : 打开 网 页 后 ， 在 Web 浏览 器 窗口 的 右 
下 角逐 渐 弹 出 一 个 广告 图 片 ， 用 鼠标 单 击 该 图 片 可 以 打开 所 链接 的 商品 促销 网 页 。 此 外 ， 
30 秒 后 该 图 片 会 自动 消失 。 

6. 使 用 JavaScript 产生 “缩放 自如 的 文字 串 ” 动 画 效 果 。 





| 











jQuery 基础 | 


jQuery 是 一 个 “ 写 得 更 少 ， 做 得 更 多 ”的 JavaScript 库 (Library) 。 使 用 jQuery API 
提供 的 方法 及 其 功能 ， 能 够 在 不 同 厂商 的 Web 浏 览 器 上 轻松 地 完成 事件 处 理 、 选 取 HTML 
DOM 元 素 对 象 和 DOM 操作 等 任务 ， 从 而 简化 了 Web 前 端 开发 工作 。 





(6 从 JavaScript 到 jQuery 的 转换 


从 基本 原理 上 讲 ，jQuery API 提供 的 许多 功能 也 可 以 使 用 JavaScript 模拟 和 实现 ， 但 
需要 在 代码 组 织 形式 及 编码 风格 方面 完成 从 JavaScript 到 jQuery 的 转换 。 


15.1.1 函数 作为 参数 


作为 一 种 函数 式 编辑 语言 ， 在 JavaScript 中 ， 不 仅 可 以 将 函数 当 作 变 量 使 用 ， 而 且 允 
许 将 一 个 函数 作为 参数 传递 给 另 一 个 函数 ， 这 也 是 从 JavaScript 转换 到 jQuery 的 起 点 。 
【 例 15-1】 函数 作为 参数 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 将 一 个 函数 作为 参数 传递 给 另 一 个 函数 </title> 
<script type="text/javascript"> 
function underline (txt) { // 使 用 函数 语句 声明 函数 underline 
return "<div style=\"text-decoration:underline; \">"+txt+"</div>"; 
} 


function strong (txt) { // 使 用 函数 语句 声明 函数 strong 
return "<div><strong>"+txt+"</strong></div>"; 


} 


function stylizeText (txt,fn) { // 第 2 个 参数 fn 表示 一 个 函数 
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return fn (txt); // 使 用 第 2 个 参数 表示 的 函数 fn 处 理 第 1 个 参数 txt 所 表示 的 文本 
} 


// 使 用 函数 表达 式 声明 匿名 函数 。 当 Web 浏览 器 完成 HTML 文档 加 载 时 会 调用 该 匿名 函数 
window.onload=function() { 
document .write (stylizeText ("使 用 行内 样式 对 文本 加 下 夯 线 ", underline)); 
document .write (stylizeText ("使 用 strong 元 素 加 粗 文本 ", strong)); 
} 
</script> 

</head> 

<body> 

</body> 

</html> 

在 本 例 中 ， 采 用 两 种 方法 声明 四 个 函数 。 

(1) 使 用 函数 语句 声明 函数 underline、strong 和 stylizeText。 其 中 ， 函 数 underline 和 
strong 的 参数 和 返回 值 都 是 字符 串 ， 而 函数 stylizeText 的 第 2 个 参数 血 表示 一 个 函数 ， 函 
数 stylizeText 使 用 第 2 个 参数 表示 的 函数 血 处 理 第 1 个 参数 txt 所 表示 的 文本 。 

(2) 使 用 函数 表达 式 声 明 一 个 匿名 函数 ， 并 直接 将 该 匿名 函数 赋值 给 window 对 象 的 
onload 属性 。 这 样 ， 当 Web 浏览 器 完成 HTML 文档 加 载 时 会 调用 该 匿名 函数 。 

此 外 ， 在 匿名 函数 中 第 1 次 调用 函数 stylizeText 时 ， 使 用 函数 underline 〈 即 第 2 个 参 
数 ) 处 理 第 1 个 参数 txt 所 表示 的 字符 串 “ 使 用 行内 样式 对 文本 加 下 画 线 ”。 此 时 ， 函 数 
stylizeText 返 回 html 字 符 串 “<div style="text-decoration:underline;"> 使 用 行内 样式 对 文本 加 
下 夯 线 </div><div>”。 

在 匿名 函数 中 第 2 次 调用 函数 stylizeText 时 ， 使 用 函数 strong ( 即 第 2 个 参数 ) 处 理 
第 1 个 参数 txt 所 表示 的 字符 串 “ 使 用 strong 元 素 加 粗 文本 ”。 此 时 ， 函 数 stylizeText 返回 
html 字符 串 “<strong> 使 用 strong 元 素 加 粗 文本 </strong></div>”。 


注意 ; 在 函数 underline 的 return 语句 中 ， 为 了 在 字符 串 中 表示 双 引 号 ,使 用 了 转 义 字 
符 “\"”。 换 言 之 ， 通 过 在 双 引 号 前 加 上 反 儿 线 “\”， 可 以 在 字符 囊 中 插入 双 引 号 。 





























15.1.2 ”使 用 JavaScript 说 明 jQuery 程序 的 基本 语法 及 其 格式 


使 用 JavaScript 可 以 演示 jQuery 编程 的 代码 组 织 形式 及 编码 风格 , 进而 说 明 jQuery 程 
序 的 基本 语法 及 其 格式 。 

【 例 15-2】 使 用 JavaScript 说 明 jQuery 程序 的 基本 语法 及 其 格式 之 一 。XHTML 及 
JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
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<title> 使 用 JavaScript 演示 jQuery 基本 语法 及 其 格式 (1) </title> 
<script type="text/javascript"> 
// 使 用 函数 语句 声明 函数 $ 
function $ (elementId) { return document.getElementById (element1Id); } 


// 为 内 置 对 象 object 增加 新 方法 html 
Object .prototype .html=function (htmlstring) { this.innerHTML= 
htmlstring; } 


// 为 内 置 对 象 object 增加 新 方法 whenclick， 该 方法 的 参数 fn 表示 一 个 函数 
Object .prototype.whenClick=function(fn) { this.onclick=fn; } 


window.onload=function() { // 当 Web 浏览 器 完成 HTML 文档 加 载 时 会 调用 该 匿名 函数 
//HTML DOM 元 素 对 象 ($ ("divId") ) 会 继承 内 置 对 象 Object 的 html 和 whenclick 方法 
$("divId") .html ("用 <strong> 鼠 标 </strong> 单 击 这 里 "); 


$ ("divId") .whenClick (function() { 
alert (" 单 击 鼠标 事件 发 生 ! "); 
]) 7 
} 
</script> 
</head> 
<body> 
<div id="divId"></div> 
</body> 
</html> 


在 JavaScript 中， 变量 名 或 函数 名 可 以 字母 开头 ， 也 可 以 S$ 开头。 因此 ， 在 本 例 中 可 以 
使 用 函数 语句 声明 函数 $， 其 参数 elementId 表示 一 个 HTML 元 素 的 id 属性 值 ， 返 回 值 即 
是 对 应 的 HTML DOM 元 素 对 象 。 

Object 是 JavaScript 中 的 内 置 对 象 ， 可 以 通过 其 prototype 属性 增加 新 方法 。 在 本 例 中 ， 
为 内 置 对 象 Object 增加 了 新 方法 html 和 whenClick, 并 且 whenClick 方法 的 参数 血 表示 一 
个 函数 。 另 一 方面 ， 在 JavaScript 中 ， 包 括 HTML DOM 元 素 对 象 在 内 的 所 有 对 象 都 是 基 
于 内 置 对 象 Object 的 ， 而 且 能 够 继承 Object 的 属性 和 方法 。 在 本 例 中 ， 一 个 HIML DOM 
元 素 对 象 也 会 继承 前 面 通过 原型 (prototype) 方式 声明 的 、 内 置 对 象 Object 的 html 和 
whenClick 方法 。 

当 通 过 一 个 HIML DOM 元 素 对 象 调用 html 方法 时 ， 可 以 为 该 HIML DOM 元 素 对 象 
设置 开始 标签 和 结束 标签 之 间 的 html 字符 串 。 当 通过 一 个 HIML DOM 元 素 对 象 调用 
whenClick 方法 时 , 可 以 将 参数 血 表示 的 函数 与 该 HIML DOM 元 素 对 象 及 其 click 事件 绑 
定 在 一 起 。 因 此 ， 当 在 对 应 的 HTML 元 素 上 单 击 时 ， 就 会 调用 参数 甸 表示 的 函数 。 换 言 
之 ， 参 数 血 表示 的 函数 就 是 对 应 的 click 事件 处 理 函 数 。 

当 Web 浏览 器 完成 HTML 文档 加 载 时 会 调用 一 个 匿名 函数 ， 进 而 执行 其 中 的 两 条 
语句 。 














T 
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(1) 在 第 1 条 语句 中 ，$("divId") 表 示 id 属性 值 为 divId 的 HIML 元 素 所 对 应 的 DOM 
对 象 ， 然 后 通过 该 HTML DOM 元 素 对 象 调用 html 方 法 ,进而 将 id 属 性 值 为 divId 的 HTML 
元 素 内 部 的 html 字符 串 设置 为 “用 <strong> 鼠 标 </strong> 单 击 这 里 ”。 

(2) 在 第 2 条 语句 中 , 通过 $("divId") 这 一 HTML DOM 元 素 对 象 调用 whenClick 方法 ， 
所 传递 的 参数 是 一 个 匿名 函数 。 这 样 ， 可 以 将 该 匿名 函数 与 ("divId") 这 一 HTML DOM 元 
素 对 象 及 其 click 事件 绑 定 在 一 起 。 因 此 ， 当 在 id 属性 值 为 divId 的 HTML 元 素 上 单 击 鼠 
标 时 ， 就 会 弹出 警告 框 并 在 其 中 显示 文本 “ 单 击 鼠 标 事件 发 生 ! ”。 


注意 : 

@ 如 果 调 用 函数 $ 时 的 实 参 是 一 个 HTML 元 素 的 id 属性 值 (如 $("divId") ) ， 则 调用 
函数 $ 的 作用 就 是 在 HTML 文档 中 查找 具有 对 应 id 属性 值 的 HTML 元 素 。 

@ 本 节 几 个 例子 中 的 JavaScript 代码 在 正 11 以 及 大 多 数 新 版 本 的 Web 浏览 器 (如 360 
安全 浏览 器 ) 中 是 可 以 正常 执行 的 ， 但 在 一 些 旧版 本 的 Web 浏览 器 中 却 不 一 定 能 正常 执 
行 。 这 是 因为 ， 不 同 厂商 的 Web 浏览 器 对 JavaScript 的 解释 执行 存在 一 定 的 差异 性 。 在 下 
浏览 器 中 能 够 正常 执行 的 JavaScript 代 码 ， 在 Chrome 浏览 器 中 也 许 不 能 正常 执行 或 者 产生 
不 同 的 效果 。 即 使 是 同一 厂商 不 同 版 本 的 Web 浏览 器 ， 对 JavaScript 功能 的 支持 也 可 能 不 
完全 一 样 。 在 IE 11 中 能 够 实现 的 某 一 JavaScript 功能 ， 在 IE 8 中 却 有 可 能 无 法 实现 。 


【 例 15-3】 使 用 JavaScript 说 明 jQuery 程序 的 基本 语法 及 其 格式 之 二 。XHTML 及 
JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 使 用 Javascript 演示 jQuery 基本 语法 及 其 格式 (2) </title> 
<script type="text/javascript"> 











function $ (selector) { 
Var reVal; 


if (selector==document) 
reVal=window; ”// 返 回 window 对 象 
else 
if (selector[0]=="#") ”// 返 回 一 个 HTML DOM 元 素 对 象 
reVal=document .getElementById (selector.substr(1)); 


return reVal7 
} 


// 代 码 同 前 例 ， 通 过 内 置 对 象 Object 的 prototype 属性 增加 新 方法 html 
Object .prototype .html=function (htmlString) { this.innerHTML= 
htmlstring; } 
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// 代 码 同 前 例 ， 通 过 内 置 对 象 Object 的 prototype 属性 增加 新 方法 whenClick 
Object .prototype.whenClick=function(fn) { this.onclick=fn; } 


// 通 过 object 的 prototype 属性 增加 新 方法 ready， 该 方法 的 参数 fn 表示 一 个 函数 
Object .prototype.ready=function (fn) { this.onload=fn; } 
// 当 Web 浏览 器 完成 HTML 文档 加 载 时 会 调用 该 匿名 函数 
$ (document) .ready (function() { 
$ ("#divId") .html ("用 <strong> 鼠 标 </strong> 单 击 这 里 "); 


$ ("#divId") .whenClick (function() { 
alert (" 单 击 鼠 标 事件 发 生 ! ") > 
1); 
7); 
</script> 
</head> 
<body> 
<div id="divId"></div> 

</body> 

</html> 

在 前 例 的 基础 上 ， 本 例 对 函数 $ 做 了 修改 ， 并 对 其 功能 进行 了 扩展 。 与 形 参 selector 对 
应 的 实 参 必须 是 document 对 象 ， 或 者 是 ID 选择 器 格式 的 字符 串 〈 如 "#divId")。 如 果 调 用 
函数 $ 时 的 实 参 是 document， 则 函数 $ 返 回 window 对 象 ， 如 果 调用 函数 $ 时 的 实 参 是 ID 选 
择 器 格式 的 字符 串 〈 如 "#divId")， 则 函数 $ 返 回 一 个 HIML DOM 元 素 对 象 。 

同 前 例 ， 本 例 通过 内 置 对 象 Object 的 prototype 属性 增加 了 新 方法 html 和 whenClick， 
并 且 一 个 HIML DOM 元 素 对 象 会 继承 内 置 对 象 Object 的 html 和 whenClick 方法 。 这 样 ， 
当 通 过 一 个 HTML DOM 元 素 对 象 调用 html 方法 时 ， 可 以 为 该 HIML DOM 元 素 对 象 设置 
开始 标签 和 结束 标签 之 间 的 html 字符 串 。 当 通过 一 个 HTML DOM 元 素 对 象 调用 
whenClick 方法 时 , 可 以 将 参数 血 表示 的 函数 与 该 HIML DOM 元 素 对 象 及 其 click 事件 绑 
定 在 一 起 。 

另外 ， 本 例 还 通过 内 置 对 象 Object 的 prototype 属性 增加 了 新 方法 ready， 该 方法 的 参 
数 血 表示 一 个 函数 。 

在 接 下 来 的 代码 中 ，$(document) 表 示 调 用 函数 $ 并 向 其 传递 实 参 document。 此 时 ， 函 
数 $ 的 返回 值 就 是 window 对 象 。 所 以 ，$(documentb) ready(function0 {...}) 实际 上 是 通过 
window 对 象 调用 ready 方法 并 向 其 传递 一 个 匿名 函数 。 这 样 , 可 以 将 该 匿名 函数 与 window 
对 象 及 其 load 事件 绑 定 在 一 起 。 因 此 ， 当 Web 浏览 器 完成 HIML 文档 加 载 时 会 调用 该 匿 
名 函数 ， 进 而 执行 其 中 的 两 条 语句 。 

(1) 与 前 例 类 似 ， 执 行 第 1 条 语句 ， 可 以 将 id 属性 值 为 divId 的 HTML 元 素 内 部 的 
html 字符 串 设置 为 “用 <strong> 鼠 标 </strong> 单 击 这 里 ”。 

(2) 第 2 条 语句 的 作用 与 前 例 类似 : 当 在 id 属性 值 为 divId 的 HIML 元 素 上 单 击 鼠 标 
时 ， 就 会 弹出 警告 框 并 在 其 中 显示 文本 “ 单 击 鼠 标 事件 发 生 ! ”。 
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注意 : 在 前 例 和 本 例 中 ， 为 了 在 HIML 文档 中 查找 id 属性 值 为 divId 的 HIML 元 素 ， 
都 需要 调用 函数 $。 但 前 例 中 的 实 参 代码 是 "divId"， 本 例 中 的 实 参 代码 则 是 "#divId"。 显 
然 ， 本 例 中 的 实 参 代码 "#divId" 与 CSS 中 ID 选择 器 的 表示 形式 完全 一 致 。 


【 例 15-4】 使 用 JavaScript 说 明 jQuery 程序 的 基本 语法 及 其 格式 之 三 。XHTML 及 
JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 使 用 Javascript 演示 jQuery 基本 语法 及 其 格式 (3) </title> 

<script type="text/javascript"> 

function $(selector) { // 代 码 同 前 例 
Var reVal; 

















if (selector==document) 
reVal=window; 
else 
if (selector[0]=="#") 
reVal=document .getElementById (selector.substr(1)); 


return reVal; 


// 代 码 同 前 例 ， 通 过 内 置 对 象 Object 的 prototype 属性 增加 新 方法 html 
Object .prototype.html=function(htmlstring) { this.innerHTML= 
htmlstring; } 


// 为 内 置 对 象 object 增加 新 方法 mouseover， 该 方法 的 参数 fn 表示 一 个 函数 


Object .prototype .mouseover=function (fn) { this.onmouseover=fn; } 


// 为 内 置 对 象 object 增加 新 方法 mouseout， 该 方法 的 参数 fn 表示 一 个 函数 


Object .prototype.mouseout=function(fn) { this.onmouseout=fn; } 


// 代 码 同 前 例 ， 通 过 内 置 对 象 Object 的 prototype 属性 增加 新 方法 ready 
Object .prototype.ready=function (fn) { this.onload=fn; } 


$ (document) .ready (function () {// 当 Web 浏览 器 完成 HTML 文档 加 载 时 调用 匿名 函数 
$ ("#divId") .html ("将 <strong> 鼠 标 </strong> 移 到 div 元 素 ") ; 





// 当 鼠标 移 至 id 属性 值 为 divId 的 HTML 元 素 时 
$ ("#divIid") .mouseover (function() { 
this .innerText=" 鼠 标 已 移 至 div 元 素 "; 
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]) 


// 当 鼠标 从 id 属性 值 为 divId 的 HTML 元 素 移 出 时 
S$("#divId") .mouseout (function() { 
this.innerText=" 鼠 标 已 从 div 元 素 移出 "; 
1D); 
1); 
</script> 
</head> 
<body> 
<div id="divId"></div> 

</body> 

</html> 

同 前 例 ， 本 例 中 函数 $ 的 主要 功能 是 : 如 果 调用 函数 $ 时 的 实 参 是 document， 则 函数 $ 
返回 window 对 象 ， 如 果 调 用 函数 $ 时 的 实 参 是 ID 选择 器 格式 的 字符 串 〈 如 "#divId")， 则 
函数 $ 返 回 一 个 HTML DOM 元 素 对 象 。 

同 前 例 , 本 例 通 过 内 置 对 象 Object 的 prototype 属 性 增加 了 新 方法 html, 并且 一 个 HTML 
DOM 元 素 对 象 会 继承 内 置 对 象 Object 的 html 方法 。 这 样 ， 当 通过 一 个 HTML DOM 元 素 
对 象 调用 html 方法 时 ， 可 以 为 该 HTML DOM 元 素 对 象 设置 开始 标签 和 结束 标签 之 间 的 
html 字符 串 。 

在 本 例 中 , 为 内 署 对 象 Object 增加 了 新 方法 mouseover， 该 方法 的 参数 血 表示 一 个 函 
数 。 这 样 ， 当 通过 一 个 HIML DOM 元 素 对 象 调用 mouseover 方法 时 ， 可 以 将 参数 血 表示 
的 函数 与 该 HIML DOM 元 素 对 象 及 其 mouseover 事件 绑 定 在 一 起 。 因 此 ， 当 鼠标 指针 移 
至 对 应 的 HTML 元 素 时 ， 就 会 调用 参数 血 表示 的 函数 。 换 言 之 ， 参 数 血 表示 的 函数 就 是 
对 应 的 mouseover 事件 处 理 函 数 。 

此 外 ， 在 本 例 中 还 为 内 置 对 象 Object 增加 了 新 方法 mouseout， 该 方法 的 参数 血 表示 
一 个 函数 。 这 样 ， 当 通过 一 个 HTML DOM 元 素 对 象 调用 mouseout 方法 时 , 可 以 将 参数 血 
表示 的 函数 与 该 HIML DOM 元 素 对 象 及 其 mouseout 事件 绑 定 在 一 起 。 因 此 ， 当 鼠标 从 对 
应 的 HIML 元 素 移出 时 ， 就 会 调用 参数 血 表示 的 函数 。 换 言 之 ， 参 数 血 表示 的 函数 就 是 
对 应 的 mouseout 事件 处 理 函 数 。 

同 前 例 , 本 例 通过 内 置 对 象 Object 的 prototype 属性 增加 了 新 方法 ready, 并 且 window 
对 象 会 继承 内 置 对 象 Object 的 ready 方法 。 这 样 ， 当 通过 window 对 象 调用 ready 方法 时 ， 
可 以 将 参数 血 表示 的 函数 与 window 对 象 及 其 load 事件 绑 定 在 一 起 。 

同 前 例 ， 在 接 下 来 的 代码 中 ，$(document) 表 示 调 用 函数 $ 并 向 其 传递 实 参 document。 
此 时 ， 函 数 $ 的 返回 值 就 是 window 对 象 。 所 以 ，$(document).ready(function() {..….}) 实际 上 
是 通过 window 对 象 调用 ready 方法 并 向 其 传递 一 个 匿名 函数 。 这样, 可 以 将 该 匿名 函数 与 
window 对 象 及 其 load 事件 绑 定 在 一 起 。 因 此 , 当 Web 浏览 器 完成 HTML 文档 加 载 时 会 调 
用 该 匿名 函数 ， 进 而 执行 其 中 的 三 条 语句 。 

(1) 与 前 例 类 似 ， 执 行 第 1 条 语句 ， 可 以 将 id 属性 值 为 divId 的 HIML 元 素 内 部 的 
html 字符 串 设 置 为 “将 <strong> 鼠 标 </strong> 移 到 div 元 素 ”。 























第 15 章 jQuery 基础 


(2) 在 第 2 条 语句 中 ， 通 过 $("#divId") 这 一 HIML DOM 元 素 对 象 调用 mouseover 方 
法 , 所 传递 的 参数 是 一 个 匿名 函数 。 这样, 可 以 将 该 匿名 函数 与 $("#divId") 这 一 HTML DOM 
元 素 对 象 及 其 mouseover 事件 绑 定 在 一 起 。 因 此 ， 当 鼠标 移 至 id 属性 值 为 divId 的 HIML 
元 素 时 ， 就 会 将 该 元 素 的 文本 内 容 设置 为 “鼠标 已 移 至 div 元 素 ”。 

(3) 在 第 3 条 语句 中 , 通过 $("#divId") 这 一 HTML DOM 元 素 对 象 调 用 mouseout 方法 ， 
所 传递 的 参数 是 一 个 匿名 函数 。 这 样 , 可 以 将 该 匿名 函数 与 5("#divId") 这 一 HTML DOM 元 
素 对 象 及 其 mouseout 事件 绑 定 在 一 起 。 因 此 ， 当 鼠标 从 id 属性 值 为 divId 的 HTML 元 素 
移出 时 ， 就 会 将 该 元 素 的 文本 内 容 设置 为 “鼠标 已 从 div 元 素 移出 ”。 

【 例 15-5】 使 用 JavaScript 说 明 jQuery 程序 的 基本 语法 及 其 格式 之 四 。XHTML 及 
JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 

<title> 使 用 Javascript 演示 jQuery 基本 语法 及 其 格式 (4) </title> 

<script type="text/javascript"> 

function $(selector) { // 对 函数 $ 有 所 改进 
Var reVal; 




















if (selector==document) 
reVal=window; 
else 
if (selector[0]=="#") 
reVal=document .getElementById (selector.substr (1) ); // 对 应 ID 选择 器 
else 
reVal=document .getElementsByTagName (selector); // 对 应 类 型 选择 器 


return reVal; 
} 


// 代 码 同 前 例 ， 通 过 内 置 对 象 object 的 prototype 属性 增加 新 方法 ready 
Object .prototype.ready=function(fn) { this.onload=fn; } 


$ (document) .ready (function() {// 当 Web 浏览 器 完成 HTML 文档 加 载 时 调用 匿名 函数 
alert ("OK")? 
var pNode=$ ("#pId"); // 第 1 次 调用 函数 $ 
pNode.style.color="RED"; // 设 置 id 属性 值 为 pId 的 元 素 中 文本 的 颜色 


aerE(OK“)》 
Var pNodes=$("p"); // 第 2 次 调用 函数 $ 


for (var i=0;i<pNodes.length;i++) 


< 
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pNodes [i] .style.fontstyle="italic"; // 设 置 所 有 p 元 素 中 文本 的 样式 
DD); 

</script> 
</head> 
<body> 

<p id="pId"> 第 1 个 段落 ...</p> 

<p> 第 2 个 段落 . . .</p> 
</body> 
</html> 


在 前 例 基础 上 ， 本 例 对 函数 $ 做 了 进一步 修改 ， 并 对 其 功能 进行 了 新 的 扩展 。 与 形 参 
selector 对 应 的 实 参 必须 是 document 对 象 ， 或 者 是 ID 选择 器 格式 的 字符 串 (如 "#pId") ， 
或 者 是 类 型 选择 器 格式 的 字符 串 〈 如 "p")。 如 果 调 用 函数 $ 时 的 实 参 是 document， 则 函数 $ 
返回 window 对 象 ， 如 果 调 用 函数 $ 时 的 实 参 是 ID 选择 器 格式 的 字符 串 〈 如 "#pId")， 则 函 
数 $ 返 回 一 个 HIML DOM 元 素 对 象 ， 如 果 调 用 函数 $ 时 的 实 参 是 类 型 选择 器 格式 的 字符 串 
《如 "p")， 则 函数 $ 返 回 一 个 包含 若干 HTML DOM 元 素 对 象 的 集合 。 由 此 看 来 ， 函 数 $ 的 主 
要 作用 是 根据 参数 selector 在 HIML 文档 树 中 查找 并 选取 特定 的 HIML DOM 元 素 对 象 ， 
以 便 对 这 些 HTML DOM 元 素 对 象 进行 一 些 操作 。 

同 前 例 , 本 例 通过 内 置 对 象 Object 的 prototype 属性 增加 了 新 方法 ready, 并 且 window 
对 象 会 继承 内 置 对 象 Object 的 ready 方法 。 这 样 ， 当 通过 window 对 象 调用 ready 方法 时 ， 
可 以 将 参数 血 表示 的 函数 与 window 对 象 及 其 load 事件 绑 定 在 一 起 。 

同 前 例 ， 在 接 下 来 的 代码 中 ，$(documenb 表 示 调 用 函数 $ 并 向 其 传递 实 参 document。 
此 时 ， 函 数 $ 的 返回 值 就 是 window 对 象 。 所 以 ，$(document).ready(function0 {...}) 实际 上 
是 通过 window 对 象 调用 ready 方法 并 向 其 传递 一 个 匿名 函数 。 这 样 , 可 以 将 该 匿名 函数 与 
window 对 象 及 其 load 事件 绑 定 在 一 起 。 因 此 , 当 Web 浏览 器 完成 HTML 文档 加 载 时 会 调 
用 该 匿名 函数 ， 进 而 执行 其 中 的 语句 。 

(1) 第 1 次 调用 函数 $ 时 的 实 参 是 ID 选择 器 格式 的 字符 串 "#pId"， 此 时 函数 $ 返 回 一 个 
HTML DOM 元 素 对 象 ， 该 HTML DOM 元 素 对 象 指 代 “ 第 1 个 段落 ”， 然 后 设置 id 属性 值 
为 pId 的 元 素 中 文本 的 颜色 〈color)。 所 以 ,“ 第 1 个 段落 ”的 文本 颜色 是 红色 (RED)。 

(2) 第 2 次 调用 函数 $ 时 的 实 参 是 类 型 选择 器 格式 的 字符 串 "p"， 此 时 函数 $ 返 回 一 个 
包含 两 个 HIML DOM 元 素 对 象 的 集合 ， 这 两 个 HIML DOM 元 素 对 象 分 别 指 代 “第 1 个 
段落 ”和 “第 2 个 段落 ”， 然 后 设置 所 有 Pp 元 素 中 文本 的 字体 样式 (fontStyle)。 所 以 ,“ 第 
1 个 段落 ”和 “第 2 个 段落 ”的 字体 样式 都 是 斜体 (italic〉。 


15.1.3 ”获取 和 使 用 jQuery 











如 前 所 述 ， 不 同 厂 商 的 Web 浏览 器 对 JavaScript 的 解释 执行 存在 一 定 的 差异 性 。 即 使 
是 同一 厂商 不 同 版 本 的 Web 浏览 器 ， 对 JavaScript 功能 的 支持 也 可 能 不 完全 一 样 。 但 
jQuery 或 其 他 的 JavaScript 库 能 够 很 好 地 解决 这 些 问题 。 换 言 之 ， 在 一 个 厂商 某 个 版 本 的 
Web 浏览 器 上 正常 执行 的 jQuery 程序 在 同一 厂商 不 同 版 本 或 男 一 厂商 的 Web 浏览 器 上 大 
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都 能 正常 执行 。 

jQuery 是 一 个 兼容 多 种 浏览 器 的 JavaScript 库 ， 其 核心 理念 是 “ 写 得 更 少 ， 做 得 更 
多 ” (write less,do more) 。 自 从 2006 年 问世 以 来 ，jQuery 已 经 成 为 最 流行 的 JavaScript 
库 ， 在 世界 前 10000 个 访问 最 多 的 网 站 中 ， 有 超过 55% 在 使 用 jQuery。 

每 个 jQuery 版 本 都 有 两 种 形式 的 文件 : 一 种 是 实际 使 用 并 精简 过 的 〈Minified) ， 如 
jquery-1.8.3.minjs; 另 一 种 是 供 jQuery 编程 和 调试 而 未 压缩 的 (Uncompressed) ， 如 
jquery-1.8.3.js。 这 两 种 形式 的 jQuery 文件 都 可 以 从 jQuery.com 免费 下 载 。 

实质 上 , jQuery 就 是 一 个 扩展 名 为 js 的 外 部 脚本 文档 。 下 载 jQuery 文件 之 后 , 可 以 将 
文件 名 修改 为 jqueryjs。 然 后 ， 在 使 用 jQuery 编程 时 ， 需 要 在 HTML 文档 头 部 使 用 script 
元 素 及 其 src 属性 指向 对 应 的 外 部 脚本 文档 , 即 在 HTML 文档 的 head 元 素 内 使 用 如 下 类 似 
代码 。 

<script type="text/javascript" src="jquery.js"></script> 

之 后 ， 即 可 在 jQuery 程序 中 调用 jQuery 预定 义 的 函数 、 方 法 及 其 功能 。 

也 可 以 通过 内 容 分 发 网 络 (Content Delivery Network，CDN) 使 用 jQuery。CDN 的 作 
用 是 通过 在 现 有 的 Internet 中 增加 一 层 新 的 网 络 架构 ， 将 网 站 的 内 容 发 布 到 最 接近 用 户 的 
网 络 “ 边 缘 ”， 使 用 户 可 以 就 近 获 取 所 需 的 内 容 ， 这 样 可 以 解决 Intemet 网 络 拥挤 的 状 
况 ， 从 而 提高 用 户 访问 网 站 的 响应 速度 。 例 如 ，Microsoft 服务 器 就 免费 提供 jQuery。 如 需 
通过 Microsoft 服务 器 使 用 jQuery， 可 以 在 HTML 文档 的 head 元 素 内 使 用 如 下 类 似 代码 。 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/ 

jQuery/jquery.js"> 

</script> 

通过 CDN 使 用 jQuery 的 优势 是 : 许多 用 户 在 访问 其 他 站 点 时 ， 已 经 从 CDN 服务 器 
下 载 了 jQuery。 这 样 ， 当 他 们 访问 新 的 站 点 时 ， 就 会 从 缓存 中 直接 加 载 jQuery， 从 而 减少 
重复 加 载 jQuery 的 时 间 。 同 时 ， 大 多 数 CDN 服务 器 还 提供 更 多 功能 当 用 户 向 
其 请 求 文件 时 ， 会 从 离 用 户 最 近 的 服务 器 上 返回 响应 ， 这 样 也 可 以 提高 加 载 jQuery 的 


15.1.4 jQuery 程序 的 基本 语法 及 其 格式 





虽然 jQuery 文件 内 部 的 代码 及 其 结构 要 复杂 得 多 ， 但 前 面 几 个 例子 使 用 JavaScript 演 
示 了 jQuery 编程 的 代码 组 织 形 式 及 编码 风格 ， 足 以 说 明 jQuery 程序 的 基本 语法 及 其 格 
式 。 本 节 直 接 使 用 jQuery 实现 前 面 几 个 例子 的 功能 ， 同 时 介绍 jQuery 程序 的 基本 要 素 以 
及 连 级 编程 模式 。 

【 例 15-6】 jQuery 程序 的 基本 语法 及 其 格式 之 一 。XHTML 及 jQuery 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.0org/TR/xhtmll1/DTD/xhtmll-strict.dtd"> 


<html xmlns="http://www.w3.0rg/1999/zxhtml"> 
<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>jQuery 程序 的 基本 语法 及 其 格式 (1) </title> 
<script type="text/javascript" src="jquery.j]s"></script> 
<script type="text/javascript"> 
// 当 Web 浏览 器 完成 DOM 加 载 时 会 调用 方法 ready 的 参数 所 表示 的 匿名 函数 
$ (document) .ready (function() { 
$ ("#divId") .html ("用 <strong> 鼠 标 </strong> 单 击 这 里 "); 
$("#divId") .click (function() { alert(" 单 击 鼠 标 事件 发 生 ! "); }); 
1); 
</script> 
</head> 
<body> 
<div id="divId"></div> 
</body> 
</html> 


本 例 直 接 使 用 jQuery 实现 了 【 例 15-2】 或 【 例 15-3】 的 功能 。 
为 了 使 用 jQuery 编程 ， 首 先 在 HTML 文档 头 部 使 用 script 元 素 及 其 src 属性 指向 对 应 
的 外 部 脚本 文档 (jqueryjs)， 即 在 HTML 文档 的 head 元 素 内 使 用 如 下 代码 。 


<script type="text/javascript" src="jquery.js"></script> 


然后 将 jQuery 程序 放 在 之 后 的 男 一 个 script 元 素 内 。 

在 jQuery 程序 中 ， 美 元 符号 $ 表 示 jQuery 的 构造 函数 ， 调 用 构造 函数 $ 会 返回 一 个 
jQuery 对 象 ， 该 jQuery 对 象 可 以 包装 零 个 、 一 个 或 多 个 HIML DOM 元 素 对 象 。 调 用 构造 
函数 $ 的 最 主要 目的 就 是 : 依据 指定 的 选择 器 〈selector) 在 HIML 文档 树 中 选取 特定 的 
HTML DOM 元 素 对 象 ， 然 后 通过 jQuery 对 象 对 所 选取 的 HIML DOM 元 素 对 象 进行 相应 
的 操作 Cmanipulation) 。 为 此 ， 可 以 使 用 如 下 基本 语法 : 


$ (selector) .manipulation(); 


其 中 ，selector 可 以 是 ID 选择 器 、 类 选择 器 和 类 型 选择 器 等 CSS 选择 器 。manipulation 表 
示 在 jQuery 中 预定 义 的 方法 ， 在 jQuery 程序 中 可 以 直接 调用 。 

在 本 例 的 语句 $("#divId").html(" 用 <strong> 鼠 标 </strong> 单 击 这 里 ") 中 ，#divId 就 是 一 
个 卫 选择 器 ，hmtl 是 在 jQuery 中 预定 义 的 方法 ， 调 用 hmtl 方法 可 以 设置 HTML 元 素 内 
部 的 html 字符 串 。 该 语句 首先 调用 jQuery 的 构造 函数 $ 并 依据 实 参 "#divId" 在 HTML 文档 
树 中 选取 id 属 性 值 为 divId 的 HIML 元 素 ; 然 后 调用 hmtl 方 法 将 这 属性 值 为 divId 的 HIML 
元 素 内 部 的 html 字符 串 设 置 为 “用 <strong> 鼠 标 </strong> 单 击 这 里 ”。 

为 了 实现 用 户 与 Web 浏览 器 之 间 的 交互 ， 在 jQuery 中 预定 义 了 一 些 与 事件 及 其 处 理 
有 关 的 方法 。 通 过 jQuery 对 象 (尤其 是 包装 HIML DOM 元 素 对 象 的 jQuery 对 象 ) 调用 这 
些 方法 ， 可 以 将 一 个 匿名 函数 与 在 特定 的 对 象 尤其 是 HIML DOM 元 素 对象 ) 上 发 生 的 
某 个 事件 绑 定 在 一 起 。 为 此 ， 可 以 使 用 如 下 基本 语法 : 


$ (selector) .eventRelatedMethod ( function () {..} ) > 
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其 中 ，selector 可 以 是 ID 选择 器 、 类 选择 器 和 类 型 选择 器 等 CSS 选择 器 ， 也 可 以 是 
document 和 window 对 象 。eventRelatedMethod 表示 在 jQuery 中 预定 义 的 、 与 某 个 事件 关 
联 的 方法 ， 在 jQuery 程序 中 可 以 直接 调用 。function0{...} 是 需要 由 用 户 定义 的 匿名 函数 ， 
也 是 对 应 的 事件 处 理 函 数 。 

在 本 例 的 语句 $(document).ready(function() {...}) 中 ，ready 就 是 在 jQuery 中 预定 义 
的 、 与 DOM 就 绪 事 件 关联 的 方法 。function0{..….} 是 由 用 户 定义 的 匿名 函数 ， 该 匿名 函数 
既是 ready 方法 的 参数 ， 又 是 DOM 就 绪 事件 的 处 理 函 数 。 这 样 ， 当 Web 浏览 器 完成 DOM 
加 载 时 就 会 调用 该 匿名 函数 。 

又 如 , 在 本 例 的 语句 $("#divId").click(function() { alert(" 单 击 鼠标 事件 发 生 ! ): }) 中 ， 
click 就 是 在 jQuery 中 预定 义 的 、 与 用 户 单 击 鼠 标 事件 关联 的 方法 。function0{..….} 是 由 用 户 
定义 的 匿名 函数 , 该 匿名 函数 既是 click 方法 的 参数 , 又 是 单 击 鼠标 事件 的 处 理 函 数 。 这 样 ， 
当 在 id 属性 值 为 divId 的 HIML 元 素 上 单 击 时 ， 就 会 弹出 警告 框 并 在 其 中 显示 文本 “ 单 击 
鼠标 事件 发 生 ! ”。 

由 此 可 见 ， 选 择 器 、 操 作 、 与 事件 关联 的 方法 以 及 对 应 的 事件 处 理 函 数 构成 了 jQuery 
程序 的 基本 要 素 。 

为 了 避免 过 度 使 用 临时 变量 或 不 必要 的 代码 重复 ，jQuery 提供 了 一 种 称 作 连 绥 
(Chaining〉 的 编程 模式 。 使 用 连 级 编程 模式 ， 可 以 在 相同 的 HTML DOM 元 素 对 象 上 连续 
进行 多 个 操作 ， 即 通过 同一 个 jQuery 对 象 连续 调用 多 个 方法 。 例如， 在 本 例 中 有 以 下 两 
条 连续 的 语句 : 

$ ("#divId") .html ("用 <strong> 鼠 标 </strong> 单 击 这 里 "); 

$ ("#divId") .click (function() { alert(" 单 击 鼠 标 事件 发 生 ! "); }); 


这 两 条 语句 即 是 通过 同一 个 jQuery 对 和 象 8("#divId") 调 用 html 和 click 方法 。 如 果 使 用 
连 级 编程 模式 ， 上 述 两 条 语句 可 以 合 写 成 如 下 一 条 语句 : 
$("#divId").html(" 用 <strong> 鼠 标 </strong> 单 击 这 里 ").click(function() { alert(" 单 击 鼠 
标 事件 发 生 ! "); 》); 
在 使 用 连 级 编程 模式 时 ， 容 易 产生 很 长 的 代码 行 。 为 此 ， 可 以 采用 分 行 且 缩 排 的 形 
式 将 其 中 的 多 个 方法 及 其 代码 组 织 在 连续 的 多 个 行 中 。 如 果 使 用 分 行 且 缩 排 的 连 绥 编 程 模 
式 ， 上 述 语句 又 可 以 改写 为 如 下 形式 
$ ("#divId") 
.html ("用 <strong> 鼠 标 </strong> 单 击 这 里 ") 
.click (function() { alert(" 单 击 鼠 标 事件 发 生 ! "); }); 


【 例 15-7】 jQuery 程序 的 基本 语法 及 其 格式 之 二 。XHTML 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtmll1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>jQuery 程序 的 基本 语法 及 其 格式 (2) </title> 


<script type="text/javascript" src="jquery.js"></script> 
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<script type="text/javascript"> 
// 当 Web 浏览 器 完成 DOM 加 载 时 会 调用 方法 ready 的 参数 所 表示 的 匿名 函数 
$ (document) .ready (function() { // 进 而 执行 匿名 函数 中 的 三 条 语句 
$ ("#divId") .html ("将 <strong> 鼠 标 </strong> 移 动 到 div 元 素 "); 
$ ("#divId") .mouseover (function () { $ (this) .text ("鼠标 已 移 至 div 元 素 "); }); 
$ ("#divId") .mouseout (function () { $ (this) .text ("鼠标 已 从 div 元 素 移出 ") ; }); 
Hh 
</script> 
</head> 
<body> 
<div id="divId"></div> 
</body> 
</html> 


本 例 直 接 使 用 jQuery 实现 了 【 例 15-4】 的 功能 。 
同 前 例 ， 为 了 使 用 jQuery， 首先 需要 在 HTML 文档 的 head 元 素 内 使 用 如 下 代码 : 


<script type="text/javascript" src="jquery.js"></script> 
然后 将 jQuery 程序 放 在 之 后 的 另 一 个 script 元 素 内 ， 其 中 的 语句 


$ (document) .ready (function() { 

















DD); 
表示 当 Web 浏览 器 完成 DOM 加 载 时 调用 一 个 匿名 函数 ， 该 匿名 函数 既是 ready 方法 的 参 
数 ， 又 是 DOM 就 绪 事 件 的 处 理 函 数 。 在 匿名 函数 中 执行 了 三 条 语句 。 

第 1 条 语句 调用 hmtl 方法 将 id 属性 值 为 divId 的 HIML 元 素 内 部 的 html 字符 串 设置 
为 “将 <strong> 鼠 标 </strong> 移 动 到 div 元 素 ”。 其 中 的 hmtl 方法 能 够 对 HIML DOM 元 
素 对 象 进行 操作 一 一 设置 HTML 元 素 内 部 的 html 字符 串 。 

在 第 2 条 语句 中 ，mouseover 是 在 jQuery 中 预定 义 的 、 与 “将 鼠标 移 至 某 个 元 素 事 件 ” 
关联 的 方法 。functionO{...} 是 由 用 户 定义 的 匿名 函数 ， 该 匿名 函数 既是 mouseover 方法 的 
参数 ， 又 是 “将 鼠标 移 至 某 个 元 素 事 件 ” 的 处 理 函 数 。 这 样 ， 当 将 鼠标 移 至 id 属性 值 为 
divId 的 HTML 元 素 时 ， 就 会 将 该 元 素 的 文本 内 容 设置 为 “鼠标 已 移 至 div 元 素 ”。 

在 第 3 条 语句 中 , mouseout 是 在 jQuery 中 预定 义 的 、 与 “将 鼠标 从 某 个 元 素 移 出 事件 ” 
关联 的 方法 。function0{...} 是 由 用 户 定义 的 匿名 函数 ， 该 匿名 函数 既是 mouseout 方法 的 
参数 ， 又 是 “将 鼠标 从 某 个 元 素 移出 事件 ”的 处 理 函 数 。 这 样 ， 当 将 鼠标 从 id 属性 值 为 
divId 的 HIML 元 素 移出 时 ， 就 会 将 该 元 素 的 文本 内 容 设置 为 “鼠标 已 从 div 元 素 移出 ”。 

注意 : 

@ 在 本 例 中 ，text 也 是 在 jQuery 中 预定 义 的 ， 且 必须 通过 jQuery 对 象 调用 的 方法 ， 
该 方法 用 来 设置 HIML 元 素 的 文本 内 容 。 

@ 在 jQuery 中 ， 有 两 大 类 最 基本 的 方法 : 一 类 是 对 HIML DOM 元 素 对 象 进行 操作 
的 方法 ， 如 html 和 text 方法 ; 另 一 类 是 与 事件 及 其 处 理 有 关 的 方法 ， 如 ready、click、 
mouseover 和 mouseout 方法 。 无 论 是 上 述 哪 一 类 方法 ， 都 必须 通过 jQuery 对 象 调用 ， 而 
jQuery 对 象 则 是 通过 调用 jQuery 的 构造 函数 $ 获 得 的 。 
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@ 与 事件 及 其 处 理 有 关 的 方法 有 一 个 重要 特征 ， 即 其 参数 应 该 是 函数 (通常 还 是 匿 
名 函数 ) ， 且 该 函数 就 是 对 应 的 事件 处 理 函 数 。 


(5> 事件 及 其 处 理 

















为 了 实现 用 户 与 Web 浏览 器 之 间 的 交互 ， 在 jQuery 中 预定 义 了 一 些 与 事件 及 其 处 理 
有 关 的 方法 。 通 过 jQuery 对 象 (尤其 是 包装 HIML DOM 元 素 对 象 的 jQuery 对 象 ) 调用 这 
些 方法 ， 可 以 将 一 个 匿名 函数 与 在 特定 的 对 象 尤其 是 HTML DOM 元 素 对 象 ) 上 发 生 的 
某 个 事件 绑 定 在 一 起 。 

表 15-1 列 出 了 与 事件 及 其 处 理 有 关 的 常用 方法 及 其 举例 和 说 明 。 


方 
Teady 
Tesize 
click 























表 15-1 与 事件 及 其 处 理 有 关 的 常用 方法 及 其 举例 和 说 明 


法 举 例 说 明 
$(document).ready(fn) 将 函数 血 绑 定 到 DOM 就 绪 事 件 〈 当 完成 DOM 加载 时 ) 
S$(window).resize(fn) 当 Web 浏览 器 窗口 大 小 发 生 改变 时 ， 会 调用 函数 血 
$(selector).click(fn) 将 函数 血 绑 定 到 被 选取 HIML 元 素 上 的 单 击 事件 


mouseover | $(selector).mouseover(fn) 当 鼠 标 移 至 被 选取 的 HTML 元 素 时 ， 会 调用 函数 血 
mouseout | $(selector).mouseout(fn) 当 鼠 标 从 被 选取 的 HTML 元 素 移出 时 ， 会 调用 函数 血 


hover 


当 鼠 标 进入 被 选取 的 HTML 元 素 时 ， 会 调用 第 1 个 函数 
$(selector).hover(fnIn,fnOut) | fnIn; 当 鼠 标 离开 这 个 HTML 元 素 时 ， 会 调用 第 2 个 函数 
fnOut 





注意 : 


@ 对 于 事件 及 其 处 理 ， 有 两 种 表述 方式 : 一 种 表述 方式 是 将 某 个 函数 绑 定 到 某 个 事 


件 


另 


一 种 表述 方式 是 当 某 个 事件 发 生 时 会 调用 某 个 函数 。 


@@ hover 方法 有 两 个 函数 类 型 的 参数 ， 分 别 对 应 “和 鼠标 进入 ”和 “和 鼠标 离开 ”事件 。 
【 例 15-8】 hover 方法 在 事件 及 其 处 理 中 的 应 用 。XHTML 及 jQuery 代码 如 下 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>hover 方法 在 事件 及 其 处 理 中 的 应 用 </title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
// 当 Web 浏览 器 完成 DOM 加 载 时 会 调用 方法 ready 的 参数 所 表示 的 匿名 函数 
$ (document) .ready (function() { // 进 而 执行 其 中 的 两 条 语句 
$ ("#divId") .text ("将 鼠标 移 进 div 元 素 ") ; 


$("#divId") .hover( 
function() { 
$ (this) .text ("鼠标 已 进入 div 元 素 "); 
}rfunction() { 


XY 
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$ (this) .text ("鼠标 已 离开 div 元 素 "); 
} 
); 
1D); 
</script> 
</head> 
<body> 
<div id="divId"></div> 
</body> 
</html> 


同 前 两 例 以 及 其 他 任何 jQuery 程序 一 样 ,本 例 的 jQuery 程序 以 如 下 方式 开始 运行 一 一 
当 Web 浏览 器 完成 DOM 加 载 时 会 调用 一 个 匿名 函数 ,该 匿名 函数 既是 ready 方法 的 参数 ， 
又 是 DOM 就 绪 事 件 的 处 理 函数 。 在 匿名 函数 中 执行 了 两 条 语句 。 

第 1 条 语句 调用 text 方 法 将 id 属性 值 为 divId 的 HTML 元 素 的 文本 内 容 设置 为 “将 鼠 
标 移动 到 div 元 素 ”。 其 中 的 text 方法 能 够 对 HTML DOM 元 素 对 象 进行 操作 一 一 设置 对 
于 HTML 元 素 的 文本 内 容 。 

在 第 2 条 语句 中 ，hover 是 在 jQuery 中 预定 义 的 、 与 “鼠标 进入 ”和 “鼠标 离开 ” 事 
件 关联 的 方法 ， 并 且 hover 方法 的 两 个 实 参 分 别 是 绑 定 到 “鼠标 进入 ”和 “鼠标 离开 ” 事 
件 的 用 户 自 定义 函数 。 这 样 ， 当 鼠标 进入 id 属性 值 为 divId 的 HTML 元 素 时 ， 就 会 将 该 元 
素 的 文本 内 容 设置 为 “鼠标 已 进入 div 元 素 ”; 当 鼠 标 离 开 id 属性 值 为 divId 的 HIML 元 素 
时 ， 就 会 将 该 元 素 的 文本 内 容 设 置 为 “鼠标 已 离开 div 元 素 ”。 

注意 : 在 调用 jQuery 构造 函数 $8 时 ， 参 数 既 可 以 是 ID 选择 器 、 类 选择 器 和 类 型 选择 器 
等 CSS 选 择 器 ， 也 可 以 是 document 和 window 对象， 还 可 以 是 在 jQuery 中 定义 的 选择 器 。 
本 例 hover 方 法 中 的 this 即 是 一 个 jQuery 选择 器 ，$(this) 则 是 调用 text 方 法 的 jQuery 对象。 





(53 选取 HTML DOM 元 素 对 象 


调用 jQuery 构造 函数 $ 的 最 主要 目的 就 是 : 依据 指定 的 选择 器 在 HIML 文档 树 中 选取 
特定 的 HIML DOM 元 素 对 象 ， 然 后 通过 jQuery 对 象 对 所 选取 的 HTML DOM 元 素 对 象 进 
行 相应 的 操作 。 换 言 之 ， 为 了 选取 特定 的 HTML DOM 元 素 对 象 ， 需 要 使 用 相应 的 选择 器 
作为 jQuery 构造 函数 $ 的 参数 。 

实际 上 ， 在 jQuery 程序 中 使 用 CSS 选择 器 或 者 jQuery 选择 器 作为 jQuery 构造 函数 $ 
的 参数 ， 可 以 灵活 地 在 HTML 文档 树 中 选取 特定 的 HIML DOM 元 素 对 象 。 


15.3.1 常用 的 CSS 选择 器 、 伪 类 以 及 结合 符 











调用 jQuery 构造 函数 $ 选 取 特定 的 HTML DOM 元 素 对 象 时 ， 可 以 在 参数 中 使 用 CSS 
选择 器 〈Selectors) 、 伪 类 (Pseudo-classes) 以 及 结合 符 (Combinators) 。 
表 15-2 列 出 了 常用 的 CSS 选择 器 、 伪 类 以 及 结合 符 。 这 些 CSS 选择 器 、 伪 类 以 及 结 
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合 符 大 都 既 可 以 在 CSS 样式 表 的 规则 中 使 用 ， 也 可 以 出 现在 jQuery 构造 函数 $ 的 参数 中 。 


表 15-2 常用 的 CSS 选择 器 、 伪 类 、 结 合 符 及 其 应 用 举例 




















结合 名 含 总 应 用 举例 及 其 所 选取 的 元 素 
类 型 过 择 器 | 横 据 万 来 名 选取 着 于 | Spm， 所 有 p 元素 
炎 光 十 册 | 根据 class 局 广 信 过 取 知 二 | SC into)，class 属性 信 为 ntro 的 所 有 元 
- HTML 元 素 $("hl1.pastoral"), class 属性 值 为 pastoral 的 所 有 hl 元 素 
ID 选择 器 i ee S$("#lastname")，id 属性 值 为 lastname 的 唯一 元 素 
鼠标 悬 停 在 其 上 的 HTML | SGa:hoveD， 鼠 标 悬 停 在 其 上 的 a 元 素 
:hover 伪 类 


元 素 $(tr:hover)， 鼠 标 基 停 在 其 上 的 tt 元素 
S$("tr:nth-child(odd)"), 属于 其 父 元 素 、 且 按 奇 数 顺 序 出 
:nth-child() 属于 其 父 元 素 、 且 按 某 种 顺 | 现 的 所 有 元 素 

伪 类 序 出 现 的 若干 HTML 元 素 | $("tr:nth-child(even)")， 必 于 其 父 元 素 、 且 按 偶数 顺序 
出 现 的 所 有 tr 元素 

$("table tr")，table 元 素 内 部 的 所 有 tr 元 素 





后 代 缚 从 符 ”| 根据 得 完 与 后 代 关系 这 了 
(用 空格 表示 ) | 后代 元 素 
要 各 这 结合 和 | 根据 父子 关系 选取 子 元 素 “| SC"tbody>tr)， 作 为 tbody 元 素 的 子 元 素 的 所 有 元素 
选择 器 分 红 ”| 根据 多 不 选择 器 同 果 近 了 
(用 ,表示 ) 若干 HTML 元 素 

下 面 使 用 新 的 CSS 伪 类 以 及 jQuery 实现 第 14 章 中 的 表格 数据 隔行 变色 。 如 图 15-1 
所 示 ， 将 表格 头 中 列 标题 行 的 背景 颜色 设置 为 浅 灰 色 ， 而 将 表格 体 中 奇数 和 偶数 数据 行 的 
背景 颜色 分 别 设置 为 浅黄 色 和 浅 绿色 。 此 外 ， 当 鼠标 滑 过 某 一 数据 行 时 ， 该 数据 行 的 背景 
颜色 将 变换 为 粉色 ， 当 鼠标 离开 该 数据 行 时 ， 其 背景 颜色 又 恢复 为 原 有 颜色 。 


ROSTER 
one | Birthday | Weighe lke) | 


S$("th,td")， 所 有 也 元 素 和 所 有 td 元 素 








列 标题 行 浅 灰色 背景 
人 Sep 16, 1993 ae 


gt Nov 29，1992 和 
sep 15, 1992 | 60 | 


Nov 18, 1991 
Dee 30,1993 


图 15-1 表格 数据 隔行 变色 
【 例 15-9】 CSS 选择 器 、 伪 类 以 及 结合 符 的 应 用 。XHTML、CSS 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtmll1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
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<title> 表 格 数据 隔行 变色 -CSS 选择 器 、 伪 类 以 及 结合 符 的 应 用 </title> 
<style type="text/css"> 
/* 设置 列 标题 行 背 景 颜色 及 字体 样式 */ 
thead>tr { background-color:lightgray; font-style:italic; } 
/* 设置 奇数 数据 行 背景 颜色 */ 
tbody>tr:nth-child(odd) { background-color:lightyellow; } 
/* 设置 偶数 数据 行 背景 颜色 */ 
tbody>tr:nth-child(even) { background-color:lightgreen; } 
tbody>tr:hover { background-color:pink; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
// 当 Web 浏览 器 完成 DOM 加 载 时 会 调用 方法 ready 的 参数 所 表示 的 匿名 函数 
$ (document) .ready (function() { 
$ ("table") .css ("border-collapse","collapse"); 
$ ("table") .css("margin","20px auto"); 
$ ("caption") .css({"color":"purple", "fontWeight":"bolder"}); 
$ ("th,td") .css({"padding":"2px 10px","border":"lpx solid"}); 
alert ($ ("th,td") .length);  // 输 出 ? 
1); 
</script> 
</head> 
<body> 
<table> 
<caption>ROSTER</caption> 
<thead> 
<tr> 
<th>Name</th><th>Birthday</th><th>Wweight (kg) </th> 
</tr> 
</thead> 
<tbody> 
<*tr> 
<td>James</td><td>Sep 16, 1993</td><td>111</td> 
<AEES> 
< 
<td>Tom</td><td>Nov 29，1992</td><td>75</td> 
二 2 
<tr> 
<td>Alice</td><td>Sep 15, 1992</td><td>60</td> 
A 
< 
<td>Edward</td><td>Nov 18, 1991</td><td>103</td> 
< 
<tr> 
<td>Catherine</td><td>Dec 30, 1992</td><td>55</td> 
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jEES 
</tbody> 
</table> 
</body> 
</html> 


在 内 部 样式 表 的 前 三 条 CSS 规则 中 ， 首 先 使 用 结合 符 > 表 示 HTML 元 素 之 间 的 父子 关 
系 。 这 样 ，thead>tr 表示 tr 元 素 是 thead 元 素 的 子 元 素 ， 所 以 指 代表 格 头 中 的 列 标题 行 。 
tbody>tr 则 表示 tr 元 素 是 tbody 元 素 的 子 元 素 ， 所 以 指 代表 格 体 中 的 数据 行 。 然 后 进一步 
使 用 伪 类 :nth-child() ， 使 得 tbody>tr:nth-child(odd) 指 代表 格 体 中 的 奇数 数据 行 、 
tbody>tr:nth-child(even) 指 代表 格 体 中 的 偶数 数据 行 。 

在 第 4 条 CSS 规则 中 ， 伪 类 :hover 对 应 鼠标 悬 停 事 件 ， 且 位 于 tbody>tr 之 后 。 所 以 ， 

“鼠标 悬 停 事件 ”所 引起 的 “背景 颜色 变换 为 粉色 ”只 会 发 生 在 表格 体 中 的 数据 行 上 ， 而 

不 会 发 生 在 表格 头 中 的 列 标题 行 上 。 

在 jQuery 程序 中 ，css 也 是 在 jQuery 中 预定 义 的 、 且 必须 通过 jQuery 对 象 调用 的 方法 ， 
该 方法 用 来 设置 HTML 元 素 的 CSS 样式 。 例 如 ， 语 句 


$ ("table") .css ("border-collapse","collapse"); 


将 表格 边框 折 又 为 单一 边框 。 其 中 ，css 方法 的 第 1 个 参数 border-collapse 是 一 个 CSS 样式 
的 特性 名 称 , 第 2 个 参数 collapse 是 对 应 的 特性 值 。 
如 果 调 用 css 方法 时 需要 设置 多 个 CSS 样式 ， 则 需要 采用 JSON 格式 。 例 如 ， 语 句 


$ ("caption") .css({"color":"purple", "fontWeight":"bolder"}); 


将 表格 标题 〈caption) 中 文本 的 颜色 〈color) 设置 为 紫色 (purple) ， 将 文本 的 粗细 
(font-weight) 设置 为 更 粗 (bolder) 。 


注意 : 

@ 在 css 方法 的 参数 中 表示 CSS 样式 特性 名 称 时 ， 既 可 以 采用 带 连 字符 的 CSS 表示 
法 (如 border-collapse、font-weight ) ， 又 可 以 采用 DOM 表示 法 (如 borderCollapse、 
fontWeight ) 。 

@ 在 本 例 的 jQuery 程序 中 ， 调 用 jQuery 构造 函数 $("th,td") 得 到 的 jQuery 对 象 包装 了 
表格 中 所 有 的 也 h 元 素 对 象 和 td 元 素 对 象 ， 这 些 也 和 td 元 素 对 象 都 会 调用 方法 
css({"padding":"2px 10px","border":"1px solid"}). 

图 jQuery 构造 函数 $ 可 以 返回 一 个 包装 若干 HTML DOM 元 素 对 象 的 jQuery 对 象 ， 
该 jQuery 对 象 拥有 表示 HIML DOM 元 素 对 象 数 目的 属性 length. 

图 在 CSS 规则 中 可 以 使 用 CSS 选择 器 、 伪 类 以 及 结合 符 ， 而 在 jQuery 构造 函数 $ 的 
参数 中 一 般 只 使 用 CSS 选择 器 和 结合 符 ， 而 不 使 用 伪 类 。 

















15.3.2 jQuery 选择 器 








除 CSS 选择 器 外 ， 在 调用 jQuery 构造 函数 $ 时 还 可 以 使 用 jQuery 自 定义 的 选择 器 。 表 
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15-3 列 出 了 常用 的 jQuery 选择 器 。 

表 15-3 常用 的 jQuery 选择 器 及 其 含义 
jQuery 选择 器 含义 举例 及 其 所 选取 的 元 素 
this 当前 元 素 S$(this)， 当 前 元 素 
:first 第 1 个 元 素 $("p:first"”)， 第 1 个 p 元 素 
:last 最 后 一 个 元 素 $("p:last"”)， 最 后 一 个 p 元 素 
a 下 标 为 偶数 的 元 素 人 下 标 为 偶数 的 p 元 素 ， 即 第 1、3、5、…… 
ca 下 标 为 奇数 的 元 素 i 下 标 为 奇数 的 p 元 素 ， 即 第 2、4、6、…… 全 
:eq(index) 下 标 为 index 的 元 素 S$("p:eq(2)")， 下 标 为 2 的 p 元素， 即 第 3 个 p 元 素 
:gt(index) 下 标 大 于 index 的 元 素 Se 下 标 大 于 2 的 p 元 素 ， 即 第 4、5、6、…… 
二 本 i S$S("P:lt(-2)"), 下 标 小 于 倒数 第 2 个 p 元 素 的 下 标的 p 元素 
:lt(index) 下 标 小 于 index 的 元 素 即 倒数 第 3、4、5、…… 个 p 元素 
:has(selector) 包含 selector 元 素 的 元 素 | $("p:has(strong)")， 包 含 strong 元 素 的 p 元 素 








注意 : jQuery 构造 函数 $ 可 以 返回 一 个 包装 若干 HTML DOM 元 素 对 象 的 jQuery 对 
象 ， 该 jQuery 对 象 拥有 的 属性 length 表示 HTML DOM 元 素 对 象 的 数目 .如 果 HIML DOM 


元 素 对 象 数 目 ( 


即 属性 length 的 值 ) 大 于 零 ， 则 每 个 HTML DOM 元 素 对 象 可 以 用 下 标 


(Index ) 标识 和 指定 ， 且 下 标 从 0 开始 。 


【 例 15-10】 


<!DOCTYPE 


jQuery 选择 器 及 其 应 用 。XHTML 及 jQuery 代码 如 下 : 


html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 


"http://www.w3.03rg/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 


<head> 
<meta ht 


tp-equiv="Content-Type" content="text/html; charset=gb2312"/> 


<title>jQuery 选择 器 </title> 


<script 
<script 


type="text/javascript" src="jquery.js"></script> 
type="text/javascript"> 


// 当 Web 浏览 器 完成 DOM 加 载 时 会 调用 方法 ready 的 参数 所 表示 的 匿名 函数 


$ (document) .ready (function() { 


$ ("Pp: 
$ ("Pp: 
$ ("Pp: 
$ ("Pp: 
$ ("Pp: 
$ ("Pp: 
$ ("Pp: 
$ ("Pp: 
Es 


frat" cas("color™", "RED")S 

last") .css ("fontWeight","bolder"); 

even") .css ("font-style","italic") 

odd") .css ("letterSspacing","2em"); 

eq(2)") .css("font-size", "2em"); 
gt(2)").css("backgroundColor", "lightyellow"); 
1t(-2)") .css("textAlign","center"); 


has (strong)") .css ("text-decoration", "underline"); 


</script> 


</head> 
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<body> 
<p><strong> 第 1 个 </strong> 段 落 ...</p> 
<p> 第 2 个 段落 . . .</p> 
<p><strong> 第 3 个 </strong> 段 落 . . .</p> 
<p> 第 4 个 段落 . . .</p> 
<p> 第 5 个 段落 . . .</p> 

</body> 

</html> 


15.3.3 ”使 用 过 滤器 缩小 结果 集 








使 用 jQuery 构造 函数 $ 以 及 CSS 选择 器 和 jQuery 选择 器 ， 可 以 获得 一 个 包装 了 若干 个 
HTML DOM 元 素 对 象 的 jQuery 对 象 。 在 此 基础 上 ， 还 可 以 继续 调用 一 些 称 作 过 滤器 
(Filter) 的 方法 进一步 缩小 结果 集 。 最 后 ，jQuery 对 象 所 包装 的 HTML DOM 元 素 对 象 也 
会 相应 地 减少 。 表 15-4 列 出 了 常用 的 过 滤器 。 

表 15-4 常用 的 过 滤器 及 其 应 用 举例 











过 滤 器 结 果 集 

firstO $("p").firstO 第 1 个 p 元 素 加 
$("p strong".first0 包含 在 p 元 素 中 的 第 1 个 strong 元 素 

外 全 在 了 元素 中 的 最 后 一 个 ston 元 素 

eq(index) $("p).eq(2) 下 标 为 2 的 p 元素 ， 即 第 3 个 p 元素 

has(element) $("p").has("strong") 包含 strong 元 素 的 所 有 p 元 素 





【 例 1S-11】 过 滤器 及 其 应 用 。XHTML 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 过 滤器 </title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("p") .first().css("color", "RED"); 
$("p strong") .first() .css("font-style","italic") 
$("p strong") .last().css("letterSpacing","2em"); 
$("p") .eq(2) .css ("font-size", "2em"); 
$("p") .has ("strong") .css ("text-decoration", "underline"); 
1D); 
</script> 
</head> 
<body> 
<p><strong> 第 1 个 </strong> 段 落 ...</p> 
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<p> 第 2 个 段落 . . .</p> 
<p><strong> 第 3 个 </strong> 段 落 ...</p> 
<p> 第 4 个 段落 . . .</p> 
<p> 第 5 个 段落 . . .</p> 
</body> 
</html> 


注意 : 前 例 中 的 如 下 语句 : 


人 DGCSSLCGOLOES 7 RED ) 
$s("peq(2)"} C55 ("font-size", "2em"); 
$("p:has(strong)") .css("text-decoration", "underline"); 


与 本 例 中 对 应 的 如 下 语句 : 


De) ,Eizst() .cs("color™, "RED")S 
$("p") .eq(2) .css ("font-size", "2em"); 
$("p") .has ("strong") .css ("text-decoration", "underline"); 


不 仅 代 码 相 似 , 而 且 作 用 相同 。 但 工作 原理 有 所 区 别 一 一 前 例 中 的 代码 :first、:eq() 和 :has() 
是 jQuery 自 定义 的 选择 器 ， 且 出 现在 jQuery 构造 函数 $ 的 参数 中 ; 而 本 例 中 的 代码 first()、 
eq0 和 hasO 则 是 可 以 被 jQuery 对 象 调用 的 ， 称 作 过 滤器 的 方法 。 


人 53 对 jQuery 对 象 进行 迭代 


通过 jQuery 对 象 调用 each(function(Integer index)) 方 法 ， 可 以 依次 访问 jQuery 对 象 所 
包装 的 HTML DOM 元 素 对 象 ， 同 时 为 每 个 HIML DOM 元 素 对 象 执行 函数 function(Integer 
index)， 函 数 的 参数 index 表示 HIML DOM 元 素 对 象 的 下 标 。 这 种 情况 也 称 为 对 jQuery 
对 象 进行 迭代 (ITteration〉。 

【 例 15-12】 调用 each 方法 迭代 jQuery 对 象 。XHTML 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0rg/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 调 用 each 方法 迭代 jQuery 对 象 </title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
$("p:even") .each (function(i) { 
alert ("元 素 下 标 : "+i+" "+$ (this) .html ()); 
1D); 
]) 
</script> 
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</head> 

<body> 
<p><strong> 第 1 个 </strong> 段 落 . . .</p> 
<p> 第 2 个 段落 . . .</p> 
<p><strong> 第 3 个 </strong> 段 落 . . .</p> 
<p> 第 4 个 段落 . . .</p> 
<p> 第 5 个 段落 . . .</p> 

</body> 

</html> 


在 本 例 中 ， 代 码 $("p:even") 中 的 :even 是 jQuery 选择 器 ，$("p:even") 选 取 下 标 为 偶数 的 
三 个 p 元 素 对 象 ， 并 且 这 三 个 p 元 素 对 象 依次 对 应 “第 1 个 ”“ 第 3 个 ”和 “第 5 个 ” 段 
落 。 因此 ，jQuery 对 象 $("p:even") 包 装 了 三 个 p 元 素 对 象 ， 但 这 三 个 p 元 素 对 象 在 jQuery 
对 象 $("p:even") 中 的 下 标 则 依次 是 0、1 和 和 2 二 
在 作为 each 方法 参数 的 匿名 函数 中 ， 参 数 1i 表 示 正 在 访问 的 p 元 素 对 象 在 jQuery 对 象 
中 的 下 标 ， 即 0、1 或 2。this 表示 正在 访问 的 p 元 素 对 象 。 


455 DOM 操作 


调用 jQuery 中 预定 义 的 一 些 方法 ， 不 仅 可 以 获取 和 设置 HTML 元 素 的 属性 及 其 属性 
值 、CSS 样式 特性 、html 字 符 串 和 文本 内 容 ， 而 且 可 以 根据 需要 在 HIML 文档 树 中 插入 新 
创建 的 HTML 元 素 对象 。 这 些 方法 所 能 实现 的 功能 统称 为 DOM 操作 〈Manipulation) 。 


15.5.1 取 值 /赋值 方法 


在 jQuery 预定 义 的 方法 中 ， 有 一 类 特殊 的 方法 一 一 根据 调用 方法 时 所 提供 参数 的 不 
同 ， 在 有 些 情况 下 可 以 获取 特定 的 返回 值 ， 而 在 男 一 些 情况 下 则 可 以 完成 赋值 任务 。 这 类 
方法 称 为 取 值 /赋值 〈getters/setters) 方法 。 表 15-5 列 出 了 常用 的 取 值 /赋值 方法 。 


表 15-5 常用 的 取 值 /赋值 方法 
方 法 功 能 
attr0 | 获取 或 设置 HTML 元 素 的 某 个 属性 的 值 
.css() 获取 或 设置 作用 在 HTML 元 素 上 的 CSS 样式 特性 
.html0 获取 或 设置 HIML 元 素 内 部 的 html 字符 串 ， 包 括 其 中 每 个 后 代 元 素 的 开始 标签 和 结束 标签 
-textO) 获取 或 设置 HTML 元 素 的 文本 内 容 ， 但 剔除 其 中 后 代 元 素 的 开始 标签 和 结束 标签 
height( ”| 获取 或 设置 HTML 元 素 的 高 度 
-widthO 获取 或 设置 HTML 元 素 的 宽度 


【 例 15-13】 取 值 /赋值 方法 的 应 用 。XHTML 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C/V/DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtmll1/DTD/zxhtmll-strict.dtd"> 
<html] xmlns="http://www.w3.0org/1999/xhtml"> 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 取 值 /赋值 方法 </tit1le> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$ (document) .ready (function() { 
alert ($ ("#firstPara") .html() ) 7 


alert ($ ("#firstPara") .text ()); 
$ ("#secondPara") .text ("第 2 个 段落 ...... ") .css("color", "RED"); 


$(".pclass") 
a fontstylo", "italic™") 
.attr("style","letter-spacing:2em"); 


alert ($ ("#secondPara") .attr ("style")); 


$("p").css({"fontSsize":"2em","background-color":"lightyellow"}); 
]) 
</script> 
</head> 
<body> 
<p id="firstPara"><strong> 第 1 个 </strong> 段 落 ...</p> 
<p id="secondPara"></p> 
<p class="pclass"> 第 3 个 段落 .. .</p> 
<p class="pclass"> 第 4 个 段落 ...</p> 
<p> 第 5 个 段落 . . .</p> 
</body> 
</html> 


本 例 HTML 文档 主体 中 共有 五 个 p 元 素 ， 每 个 p 元 素 代表 一 个 段落 。jQuery 程序 使 用 
六 条 语句 对 这 五 个 p 元 素 进 行 了 如 下 操作 。 

第 1 条 语句 alert($("#firstPara").html()) 通 过 警告 框 输出 id 属性 值 为 firstPara 的 p 元 素 
内 部 的 html 字符 串 “<strong> 第 1 个 </strong> 段 落 ...”， 包 括 后 代 元 素 strong 的 开始 标签 和 
结束 标签 。 

第 2 条 语句 alert($("#firstPara").text()) 通过 警告 框 输出 id 属性 值 为 firstPara 的 p 元 素 
的 文本 内 容 “ 第 1 个 段落 …”， 此 时 剔除 了 后 代 元 素 strong 的 开始 标签 和 结束 标签 。 

第 3 条 语句 使 用 了 连 级 编程 模式 ， 首 先 调 用 text 方法 设置 id 属性 值 为 secondPara 的 p 
元 素 的 文本 内 容 “ 第 2 个 段落 ...”， 然 后 调用 css 方法 将 文本 的 颜色 (color) 设置 为 红 
色 (RED) 。 

第 4 条 语句 使 用 了 分 行 且 缩 排 的 连 级 编程 模式 ， 首 先 调 用 css 方法 将 class 属性 值 为 
pClass 的 所 有 p 元 素 中 文本 的 字体 样式 〈fontStyle) 设置 为 斜体 (italic)， 然 后 调用 attr 方 
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法 将 文本 的 字符 间距 (letter-spacing) 设置 为 2em。 
第 5 条 语句 alert($("#secondPara").attr("style")) 通过 警告 框 输出 id 属性 值 为 secondPara 
的 P 元 素 的 style 属性 值 。 
第 6 条 语句 调用 css 方法 将 所 有 p 元 素 中 文本 的 字体 大 小 〈fontSize) 设置 为 2em、 将 
于 景 颜色 (background-color) 设置 为 浅黄 色 (lightyellow)。 


15.5.2 ”垂直 滚动 播放 的 文本 








下 面 使 用 相对 定位 、 绝 对 定位 、clip 特性 以 及 jQuery 中 的 取 值 /赋值 方法 制作 垂直 滚动 
播放 的 文本 。 
【 例 15-14】 重 直 深 动 播放 的 文本 。XHTML、CSS 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtml1/VDTD/Vxhtml1-strict.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 冬 直 深 动 播放 的 文本 跑马 灯 ) </title> 
<style type="text/css"> 











#outerBox { position:relative; width:198px; height:98px; border:1px 
solid red; 
background:#FFFFEO0; } 
#innerBox { position:absolute; } 
#innerBox a { text-decoration:none; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
var innerDivElement; // 指 代 innerBox 元 素 盒子 
var innerBoxHeight;  //innerBox 元 素 盒子 的 高 度 
var innerBoxTop;  ”//innerBox 元 素 盒 子 CSS 样式 特性 top 
var clipWindowWidth,clipWindowHeight;  //clipWindow 窗口 的 宽度 和 高 度 
var speed=100; // 控 制 innerBox 元 素 盒子 及 其 中 文本 向 上 移动 的 速度 


function scrollText() { 
if (Math.abs (innerBoxTop)<innerBoxHeight) { 
// 使 innerBox 元 素 盒子 及 其 中 的 文本 上 移 1 个 像素 
innerDivElement .css ("top", (--innerBoxTop) +"px"); 
// 重 新 设置 clipWindow 窗口 ， 以 使 clipWindow 窗口 在 整个 网 页 中 的 位 置 及 尺寸 不 变 


innerDivElement .css ("clip","rect ("+Math.abs (innerBoxTop) +"px, "+ 





clipWindowWidth+"px,"+(Math.abs (innerBoxTop)+clipWindowHeight)+ 
"px, Opzx) "); 
} 


else 


/ /恢复 innerBoxTop 的 初始 值 ， 可 使 jnnerBox 元 素 盒子 及 其 中 文本 直接 下 移 至 初始 位 置 
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innerBoxTop=0; 
} 


$ (document) .ready (function() { 
innerDivElement=$ ("#innerBox"); // 获 取 innerBox 元 素 盒子 
innerBoxHeight=innerDivElement .height (); 
// 设 置 变量 innerBoxTop 的 初始 值 ， 即 innerBox 元 素 盒子 及 其 中 文本 的 初始 位 置 
innerBoxTop=0; 
Var outerDivElement=$ ("#outerBox");  ”// 获 取 outerBox 元 素 盒 子 
clipWindowWidth=outerDivElement .width(); 
clipWindowHeight=outerDivElement .height (); 
setInterval ("scrollText ()", speed); 
DD); 
</script> 
</head> 
<body> 
<div id="outerBox"> 
<div id="innerBox"> 


<br/><br/> 
<a href="http://www.sina.com">* 新 浪 网 重要 通知 ! 新 浪 网 重要 通知 ! </a> 
<br/><br/> 
<a href="http://www.baidu.com">* 百度 网 紧急 通知 ! 百度 网 紧急 通知 ! </a> 
<br/><br/> 
<a href="http://www.sohu.com">* 搜狐 网 重要 通知 ! 搜狐 网 重要 通知 ! </a> 
</div> 
</div> 
</body> 
</html> 


本 例 沿用 了 【 例 14-6] 的 基本 思路 。 例 如 ， 对 id 属性 值 为 outerBox 的 div 元 素 及 盒子 
进行 相对 定位 ， 对 id 属性 值 为 innerBox 的 div 元 素 及 盒子 进行 绝对 定位 。 因 此 ，outerBox 
元 素 盒子 即 是 innerBox 元 素 盒子 的 包含 块 ，innerBox 元 素 盒子 也 就 能 够 以 outerBox 元 素 盒 
子 为 基准 进行 绝对 定位 。 在 scrollText 函数 中 对 id 属性 值 为 innerBox 的 div 元 素 设置 clip 
特性 ， 使 得 在 网 页 中 只 能 看 到 innerBox 元 素 盒子 中 的 部 分 文本 。 

但 与 【 例 14-6】 不 同 ，scrollText 函数 中 的 流程 控制 使 用 了 如 下 选择 结构 。 

(1) 当 条 件 (Math .abs(innerBoxTop)<innerBoxHeighb 成 立时 ， 表 示 innerBox 元 素 盒 
子 尚 未 完全 从 outerBox 元 素 盒子 的 上 方 移出 ， 此 时 会 继续 使 innerBox 元 素 盒子 及 其 中 的 文 
本 上 移 1 个 像素 ， 并 且 裁 前 innerBox 元 素 盒子 中 的 文本 。 这 样 , 就 会 产生 “clipWindow 窗 
口 在 整个 网 页 中 的 位 置 及 尺寸 保持 不 变 、 同 时 innerBox 元 素 盒子 及 其 中 的 文本 不 断 上 移 ” 
的 动画 效果 。 

(2) 当 条 件 (Math.abs(innerBoxTop)<innerBoxHeight) 不 成 立时 ， 表 示 innerBox 元 素 
盒子 恰好 完全 从 outerBox 元 素 盒子 的 上 方 移出 ， 此 时 会 恢复 变量 innerBoxTop 的 初始 值 
0， 从 而 使 mnerBox 元 素 盒子 及 其 中 的 文本 直接 下 移 至 初始 位 置 。 这 样 ， 在 之 后 继续 通过 
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Interval 定时 器 周期 性 调用 scrollText 函数 时 ， 就 会 产生 “文本 垂直 滚动 播放 ”的 动画 
效果 。 


注意 : 虽然 【 例 14-6〗 和 本 例 中 的 全 局 变量 innerDivElement 均 指 代 innerBox 元 素 盒 
子 ， 但 两 者 还 是 有 很 大 区 别 。 在 【 例 14-6】 中 ， 全 局 变量 innerDivElement 指向 的 是 HTML 
文档 树 中 对 应 的 一 个 div 元 素 对 象 ， 因 此 该 对 象 拥有 style.top 和 style.clip 属性 。 而 在 本 例 
中 ， 全 局 变量 innerDivElement 指向 的 是 一 个 jQuery 对 象 ， 该 jQuery 对 象 包装 了 一 个 div 
元 素 对 象 。 此 外 ， 通 过 该 jQuery 对 象 可 以 调用 height 和 css 等 方法 。 由 此 可 见 ，HTML 文 
档 树 中 的 一 个 元 素 对 象 与 一 个 jQuery 对 象 不 仅 拥有 不 同 的 属性 ， 而 且 所 调用 的 方法 也 不 
一 样 。 


15.5.3 ”治水 平方 向 来 回 移动 的 图 片 链接 


下 面 使 用 jQuery 重新 制作 在 网 页 的 水 平方 向 上 来 回 移动 的 图 片 链接 一 一 当 图 片 移动 
到 Web 浏览 器 窗口 的 右边 界 时 ， 图 片 会 开始 向 左 移 动 ， 而 当 图 片 移动 到 Web 浏览 器 窗口 
的 左边 界 时 ， 图 片 又 会 开始 向 右 移动 。 此 外 ， 当 鼠标 滑 过 图 片 时 ， 可 以 让 图 片 停止 移动 ; 
当 鼠 标 离开 图 片 时 ， 又 可 以 让 图 片 继续 移动 。 当 用 鼠标 单 击 图 片 时 ， 可 以 使 用 Web 浏览 
器 打开 所 链接 的 网 页 。 
【 例 1$-1S】 沿 水 平方 向 来 回 移动 的 图 片 链接 。XHTML 及 jQuery 代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtml1VDTD/Vxhtml1-strict.dtd"> 
<html] Xmlns="http://www.W3.org/1999/Xhtm1"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 沿 水 平方 向 来 回 移动 的 图 片 链接 </tit1le> 


<script type="text/javascript" src="jquery.js"></script> 





<script type="text/javascript"> 
Var x=50, y=60; /7 设置 图 片 的 初始 位 置 ， 并 记录 图 片 的 下 一 个 位 置 (x，y) 


var step=1; // 控 制图 片 每 次 移动 的 像素 数 
var speed=10; // 控 制图 片 的 移动 速度 
var divElement; // 包 含 超 链接 及 图 片 的 div 元 素 


// 变 量 moveRight 用 于 判断 并 控制 图 片 的 水 平移 动 方向 
//moveRight 为 true， 表 示 图 片 应 向 右 移 动 : moveRight 为 false， 表 示 图 片 应 向 左 移动 


Var moveRight=true; 


// 设 置 图 片 的 水 平移 动 区 间 
var leftBound=0; // 将 Web 浏览 器 窗口 的 左 端 设置 为 图 片 可 以 到 达 的 最 左 端 
var rightBound; // 图 片 可 以 到 达 的 最 右 端 位 置 








function movePicture() { 


// 设 置 图 片 新 的 水 平 位 置 ， 即 水 平移 动 图 片 


Xe 
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divElement .css("1Left",X+npX") 7 

// 计 算 图 片 水 平移 动 的 下 一 个 位 置 ， 每 次 判断 是 向 右 移动 还 是 向 左 移动 

X=X+Step+ (moveRight?1:-1)7 

if (x>rightBound) moveRight=false; /7 判断 是 否 改变 图 片 的 水 平移 动 方向 


else if (x<leftBound) moveRight=true; 


$ (window) .resize (function() { // 当 改变 Web 浏览 器 窗口 大 小 时 

// 调 整 图 片 可 以 到 达 的 最 右 端 位 置 

rightBound=$ (window) .width()-divElement .width(); 

if (x>rightBound) x=rightBound; // 将 图 片 直接 移动 到 新 的 最 右 端 位 置 
]) 7 


$ (document) .ready (function() { 
// 鼠 标 滑 过 图 片 时 ， 让 图 片 停止 移动 
divElement=$ ("#divPicture") .mouseover (function () { clearInterval 
(timerID); }); 


// 鼠 标 离开 图 片 时 ， 让 图 片 继续 移动 

divElement .mouseout (function() { 
timerID=setInterval ("movePicture()", speed); 

1); 


// 浏 览 器 窗口 的 宽度 减 去 div 元 素 对 象 的 宽度 就 是 图 片 可 以 到 达 的 最 右 端 位 置 
rightBound=$ (window) .width () -divElement .width() 7 


// 每 隔 speed 毫秒 执行 一 次 movePicture () 
Var timerID=setInterval ("movePicture()", speed); 
和 
RDE> 
</head> 
<body> 
<div id="divPicture" style="position:absolute"> <!-- 绝 对 定位 div 元 素 --> 
<a href="http://www.sina.com"><img src="sinaLogo.gif" alt=""/></a> 
</div> 
</body> 
</html> 


在 HTML 文档 主体 ， 使 用 行内 样式 style="position:absolute" 对 id 属性 值 为 divPicture 
的 div 元 素 进行 绝对 定位 ， 并 且 在 该 div 元 素 中 嵌入 了 创建 有 超 链接 的 图 片 。 

在 HIML 文档 头 部 的 JavaScript 中 ， 全 局 变量 x 和 y 用 于 设置 并 控制 div 元 素 盒 子 在 
网 页 中 的 位 置 ， 全 局 变量 step 用 于 控制 图 片 每 次 移动 的 像素 数 ， 全 局 变量 speed 用 于 控制 
图 片 的 移动 速度 。 

全 局 变量 moveRight 用 于 判断 并 控制 图 片 的 水 平移 动 方向 。moveRight 为 ttue， 表 示 图 
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片 应 该 向 右 移 动 ， moveRight 为 false， 表 示 图 片 应 该 向 左 移动 。 

全 局 变量 leftBound 和 rightBound 用 于 设置 图 片 的 水 平移 动 区 间 ， 其 中 变量 leftBound 
表示 图 片 可 以 到 达 的 最 左 端 ， 变 量 rightBound 表示 图 片 可 以 到 达 的 最 右 端 。 

在 自 定义 函数 movePicture 中 ， 首 先 根据 变量 x 的 最 新 值 调 整 图 片 在 网 页 中 的 水 平 位 
置 ， 然 后 使 用 条 件 运 算 符 ， 并 根据 moveRight 的 值 计算 图 片 的 下 一 个 水 平 位置 ， 最 后 当 图 
片 移动 到 最 左 端 或 最 右 端 时 改变 moveRight 的 值 。 这 样 ， 即 可 在 Web 浏览 器 窗口 内 产生 
“图 片 沿 水 平方 向 来 回 移 动 ”的 动画 效果 。 

在 jQuery 中 ， 方 法 resize 用 于 响应 和 处 理 Web 浏览 器 窗口 改变 事件 ， 此 时 可 以 调整 图 
片 可 以 到 达 的 最 右 端 位 置 。 方 法 mouseover 用 于 响应 和 处 理 鼠 标 移 至 元 素 事件 ， 此 时 可 以 
清除 Interval 定时 器 ， 从 而 停止 图 片 的 移动 。 方 法 mouseout 用 于 响应 和 处 理 鼠 标 移出 元 
素 事件 ， 此 时 可 以 重新 调用 函数 movePicture、 同 时 设置 Interval 定时 器 ， 从 而 继续 图 片 的 
移动 。 








15.5.4 JSON 


JavaScript 对 象 表示 法 (JavaScript Object Notation，JSON) 是 一 种 在 Web 中 广泛 应 用 
的 、 轻 量 级 的 数据 组 织 和 交换 格式 。 

JSON 基于 对 象 (object) 和 数组 〈array) 两 种 结构 ， 并 具有 如 下 一 些 形式 : 

(1) 对 象 是 一 个 无 序 的 “名 称 / 值 对 ” (name/value pairs) 的 集合 。 一 个 对 象 以 左 花 括 
号 “{” 开 始 、 右 花 括号 “}” 结 束 。 每 个 “名 称 ”后 跟 一 个 冒号 “:”，“ 名 称 / 值 对 ”之 
间 使 用 逗号 “,” 分 隔 。“ 名 称 ” 即 是 对 象 的 属性 名 ，“ 值 ” 即 是 对 应 的 属性 值 。 例 如 ， 

{ "name":"Bob"，"gender":" 男 "，"age":22，"origin":" 四 川 成 都 ”} 

{ "font-size":"2em", "backgroundColor":"lightyellow" } 

(2) 数组 是 值 的 有 序列 表 。 一 个 数组 以 左 方 括号 “[” 开 始 、 右 方 括号 “]” 结 束 。 值 
之 间 使 用 逗号 “,” 分 隔 。 例 如 ， 

[1, 3, 5,7] 

[ "XHTML+div+CSS", "OOP", "JavaScript+jQuery+JSON", "Java", "SQL Server" ] 


(3) 值 可 以 是 双 引号 括 起 来 的 字符 串 、 数 值 、 布 尔 值 (true 或 false) 、 空 值 (null) 、 
对 象 或 者 数组 。 

在 JavaScript 或 jQuery 程序 中 ， 可 以 使 用 for 语句 遍历 数组 中 的 数据 (下 标 和 元 素 ) ， 
而 使 用 forin 语句 遍历 对 象 中 的 数据 〈 属 性 名 和 属性 值 ) 。 

【 例 15-16】 JSON 举例 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 
<htm1l xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>JSON</title> 
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</head> 
<body> 
<script type="text/javascript"> 
var odds=[1,3,5,7]; // 数 组 ， 包 含 四 个 元 素 ， 每 个 元 素 是 一 个 整数 
document .write ("变量 odds 的 类 型 是 "+ (typeof odds)+"<br/>"); 
for (var i=0;i<odds.length;i++) 
document .write ("下 标 为 "+i+" 的 元 素 :"+odds [i]+" "); 

document .write ("<br/><br/>"); 


// 对 象 ， 有 3 个 "属性 名 /属性 值 ”对 
Var person={ "name":"Bob", "gender":" 男 ", "age":22 }; 
document .write ("变量 person 的 类 型 是 "+ (typeof person)+"<br/>"); 
for (var prop in person) 
document .write ("属性 "+prop+" 的 值 :"+person[prop]+" "); 
document .write ("<br/>"+person.name+" "+person.gender+" "+person.age); 
document .write ("<br/><br/>"); 


var giants=[ // 数 组 ， 包 含 三 个 元 素 ， 每 个 元 素 是 一 个 对 象 
{ "firstName":"Bill", 
{ "firstName":"Mark", "lastName":"Zuckerberg" }, 
{ "firstName":"Steve", "lastName":"Jobs" } 

]; 

document .write ("变量 giants 的 类 型 是 "+ (typeof giants)+"<br/>"); 

for (var i=0;i<giants.length;i++) { 








"JastName":"Gates", "company":"Microsoft" }, 





for (var prop in giants[i]) 
document .write (giants[i] [prop]+" "); 
document .write ("<br/>"); 
} 
document .write ("<br/>"); 


var curriculum={ // 对 象 ， 每 个 属性 值 又 是 数组 
"第 3 学 期 ": ["XHTML+div+CSS", "O00P"]， 
"第 4 学 期 ": ["Javascript+jQuery+JSON", "Java"]， 
"第 5 学 期 ": ["SQL Server"]， 
"第 6 学 期 ": ["Apache+MySQL+PHP+AJAX+XML+JSON"] 
] 
document .write ("变量 curriculum 的 类 型 是 "+ (typeof curriculum) +"<br/>") 7 
document .write ("与 属性 ' 第 4 学 期 ' 和 下 标 '0' 对 应 的 值 是 "+ 
curriculum[" 第 4 学 期 "] [0]+"<br/>"); 





for (var term in curriculum) { 
document .write (term+" 的 课程 : "); 
for (var i=0;i<curriculum[term] .length;i++) 
document .Write (curriculum[term] [i]+" "); 
document .write ("<br/>"); 
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document .write ("<br/>"); 


var departments={ // 对 象 ， 每 个 属性 值 又 是 数组 
"政府 部 门 ": [" 城 管 局 "， "公安 局 ", "交通 委 ", "教育 局 ", "环保 局 "," 民 委 "，" 民 政局 "] ， 
"公共 企 事 业 单位 ": [" 地 铁 公司 "， "电力 公 司 "， "公积金 管理 中 心 ", "公交 集团 公司 "] ， 
"区 县 ": [" 成 华 区 "， "金牛 区 "，, "锦江 区 ", "青羊 区 "，" 武 侯 区 "， ”都江堰 市 "," 豆 州 市 "] 
}; 
document .write ("变量 departments 的 类 型 是 "+ (typeof departments)+"<br/>"); 
for (var category in departments) { 
document .write (category+" 类 受理 机 构 包 括 : "); 
for (var i=0;i<departments[category] .length;i++) 
document .write (departments [category] [i]+" "); 
document .write ("<br/>"); 
] 7 
</script> 
</body> 
</html> 


在 本 例 中 ， 变 量 odds 表示 一 个 数组 ， 其 中 包含 四 个 元 素 ， 每 个 元 素 是 一 个 整数 ， 使 
用 for 语句 遍历 数组 中 的 每 个 元 素 odds[i]。 

变量 person 表示 一 个 对 象 ， 其 中 包含 三 个 “属性 名 /属性 值 ” 对 ， 使 用 forin 语句 遍历 
对 象 中 的 数据 (属性 名 和 属性 值 〉。 

变量 giants 表示 一 个 数组 ， 其 中 包含 三 个 元 素 ， 每 个 元 素 又 是 一 个 对 象 。 外 循环 的 for 
语句 遍历 数组 中 的 每 个 对 象 ， 每 个 对 象 用 giants[i] 表 示 ;， 内 循环 的 forin 语 句 遍 历 一 个 对 象 
中 的 数据 ，prop 表示 属性 名 (如 "firstName")，giants[i][prop] 表 示 对 应 的 属性 值 (如 "Bill")。 

变量 curriculum 表示 一 个 对 象 ， 其 中 包含 四 个 “属性 名 /属性 值 ”对 ， 每 个 属性 值 又 是 

-个 数组 。 外 循环 的 forin 语句 遍历 对 象 中 的 每 个 “属性 名 /属性 值 ”对 ,变量 term 表示 属 

性 名 《如 "第 3 学 期 ")，curriculum[term] 表 示 对 应 的 属性 值 ， 内 循环 的 for 语句 遍历 数组 中 
的 每 个 元 素 ( 如 "XHTML+div+CSS")， 每 个 元 素 用 curriculum[temm][i] 表 示 。 

变量 departments 表示 一 个 对 象 ， 其 中 包含 三 个 “属性 名 /属性 值 ”对 ， 每 个 属性 值 又 
是 一 个 数组 。 外 循环 的 for-in 语句 遍历 对 象 中 的 每 个 “属性 名 /属性 值 ” 对 ， 变 量 category 
表示 属性 名 (如 "政府 部 门 ")，departments[category] 表 示 对 应 的 属性 值 ， 内 循环 的 for 语句 
遍历 数组 中 的 每 个 元 素 〈 如 "城管 局 ")， 每 个 元 素 用 departments[category][i] 表 示 。 


注意 : 

@ 一 个 对 象 不 同属 性 的 值 可 以 是 不 同 的 数据 类 型 。 如 在 本 例 的 person 对 象 中 ， 属 性 
name 的 值 是 字符 串 "Bob"， 而 属性 age 的 值 则 是 整数 22。 

@ 使 用 JSON 格式 组 织 数据 时 ， 既 可 以 在 数组 中 包含 对 象 (如 giants ) ， 又 可 以 在 对 
象 中 包含 数组 ( 如 curriculum 和 departments ) 。 





15.5.5 创建 和 插入 HTML 元 素 对 象 


在 jQuery 程序 中 ， 只 要 在 参数 中 指定 HTML 元 素 的 开始 标签 和 结束 标签 以 及 元 素 的 
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文本 内 容 、 属 性 及 其 属性 值 ， 即 可 调用 jQuery 的 构造 函数 $ 创 建 包 装 HIML 元 素 对 象 的 
jQuery 对 象 。 例 如 ， 

(1) 仅 指 定 元 素 的 开始 标签 和 结束 标签 ， 如 $("<table></table>")、S$("<tr></tr>")、 
$("<td></td>")。 

(2) 指定 元 素 的 开始 标签 和 结束 标签 ， 同 时 指定 元 素 的 文本 内 容 ， 如 
$("<p>Hello</p>")。 

(3) 指定 元 素 的 开始 标签 和 结束 标签 ， 同 时 在 开始 标签 中 指定 属性 及 其 属性 值 ， 如 
$("<div class='barText></div>")。 

此 外 ， 调 用 jQuery 中 预定 义 的 一 些 方法 ， 还 可 以 根据 需要 在 HTML 文档 树 中 插入 新 
创建 的 HTML 元 素 对 象 。 表 15-6 列 出 了 在 HIML 文档 树 中 插入 HTML 元 素 对 象 的 方法 。 


表 15-6 插入 HTML 元 素 对 象 的 方法 
方 法 功 能 
在 被 选 元 素 的 内 部 、 从 尾 端 插入 content。 之 后 ， 被 选 元 素 和 content 是 上 
-append(content[,content]) 下 父子 关系 
将 被 选 元 素 从 尾 端 插入 到 target 的 内 部 。 之 后 ，target 和 被 选 元 素 是 上 下 父 
.appendTo(target) 子 关系 
在 被 选 元 素 的 内 部 、 从 首 端 插入 content。 之 后 ， 被 选 元 素 和 content 是 上 
.prepend(content[,content]) 下 父子 关系 
在 target 内 部 、 从 首 端 插入 被 选 元 素 。 之 后 ，target 和 被 选 元 素 是 上 下 父子 
.prependTo(target) 关系 
在 被 选 元 素 的 后 面 插入 content。 之 后 ， 被 选 元 素 和 content 是 前 后 兄弟 关系 





.after(content[,content]) 






.insertAfter(target) 
.before(content[,content]) : 前 面 插入 content。 之 后 ，content 和 被 远 元 素 是 前 后 兄弟 关系 
.insertBefore(target) 将 被 选 元 素 插 入 到 target 的 前 面 。 之 后 , 被 选 元 素 和 target 是 前 后 兄弟 关系 


如 图 15-2 所 示 ， 在 表格 头 的 列 标题 行 中 设置 Jan、Feb、Mar 等 列 标题 ， 列 标题 行 下 面 
有 六 行 数据 ， 其 中 的 数字 为 百分比 。 此 外 ， 在 表格 的 第 1 列 中 设置 Chrome、Intemet 
Explorer 和 Sogou Explorer 等 行 标题 。 


国内 桌面 浏览 器 排行 榜 (2015 年 ) 
(www. statcounter. com) 《表格 中 数字 为 百分比 ) 


Jan | Feb | Mar | Apr | May | Jun | Jal | Ang | Sep | Oct | Nov | Dec 
Chrome 52.62|53.3|54.66|55.2 |55.24|59.58|60.32|59.8 |54.85|51.98 | 54. 84 | 56. 86 
Tnternet Rxnlorer| 23- 13| 23. 5| 22. 93 | 22. 01 | 22. 87 | 19. 49 | 18- 23 | 17- 58 | 23. 78| 26. 44 | 22. 5 |19.99 
Sogou Explorer 8.5 |8.63|8.47 |8.53 |8.18 |8.2 |8.32 |8.49 |7.58 |6.83 |7.02 |7.42 






























































Firefox 6.66 |5.1 |4.59 |4.67 |4.09 |3.86 |3.74 |3.96 |4.24 |4.71 |5.47 |5.99 
QQ Browser 429 |474|443 |438 |484 |447 |4.99 |5.22 |4.65 |479 |4.53 |414 
Maxthon 2.71 |2.73|2.6 |2.59 |2.53 |2.64 |2.61 |2.63 |2.21 |1.89 |1.97 |1.97 





15-2 包含 列 标题 和 行 标题 的 表格 











首先 ， 可 以 采用 如 下 JSON 格式 组 织 表格 中 的 数据 。 











var data={ 
"colHeading": ["Jan", "Feb", "Mar", "Apr", "May", "Jun",..., "Oct", "Nov", "Dec"], 


percentagqes":{ 
"Chrome": [52.62,53.3,54.66,55.2,55.24,59.58, 60.32,59.8,54.85,51.98,.], 
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"Internet Explorer ":[23.13,23.5,22.93,22.01,22.87,19.49,18.23,17.58,..], 
"Sogou Explorer": [8.5,8.63,8.47,8.53,8.18,8.2,8.32,8.49,7.58,6.83,..], 
"Firefox":[6.66,5.1,4.59,4.67,4.09,3.86,3.74,3.96,4.24,4.71,5.47,5.99], 
"QQ Browser": [4.29,4.74,4.43,4.38,4.84,4.47, 4.99,5.22,4.65,4.79,4.53,4.14], 
"Maxthon": [2.71,2.73,2.6,2.59,2.53,2.64,2.61,2.63,2.21,1.89,1.97,1.97] 


}; 


这 样 ，data 表示 一 个 对 象 ， 该 对 象 有 两 个 属性 : 
(1) 属性 colHeading 的 值 是 一 个 数组 ["Jan","Feb",.…,"Nov","Dec"]， 该 数组 用 data. 


colHeading 表示 。 


(2) 属性 percentages 的 值 又 是 一 个 子 对 象 ， 该 子 对 象 有 六 个 属性 ， 属 性 名 分 别 是 


Chrome、Internet Explorer、Sogou Explorer、Firefox、QQ Browser 和 Maxthon， 对 应 的 六 





个 属性 值 都 是 包含 12 个 数值 的 数组 。 
【 例 15-17】 JSON 应 用 之 一 : 动态 设置 表格 的 标题 、 添 加 列 标题 行 和 数据 行 。XHTML、 
CSS 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtml1/VDTD/Vxhtml1-strict.dtd"> 
<html Xmlns="http://www.W3.oOrg/1999/Xhtm1"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 动 态 设置 表格 的 标题 、 添 加 列 标题 行 和 数据 行 </title> 
<style type="text/css"> 
table { border-collapse:collapse; margin:20px auto; font-weight: 
bolder; } 
th,td { padding:5px; border:lpx solid black; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
var data={ // 使 用 JSON 格式 组 织 数据 
"colHeading": ["Jan", "Feb", "Mar", "Apr", "May", "JuNn",....., "Oct", "Nov", "Dec"], 
"percentages":{ 
"Chrome":[52.62,53.3,54.66,55.2,55.24,59.58,60.32,59.8,54.85,...], 
"Internet Explorer": [23.13,23.5,22.93,22.01,22.87,19.49,18.23,...], 
"Sogou Explorer":[8.5,8.63,8.47,8.53,8.18,8.2,8.32,8.49,7.58,..], 
"Firefox":[6.66,5.1,4.59, 4.67,4.09,3.86,3.74,3.96,4.24,4.71,5.47, 
5.99]， 
"QQ Browser": [4.29,4.74,4.43,4.38,4.84,4.47,4.99,5.22,4.65,4.79,...], 
"Maxthon": [2.71,2.73,2.6,2.59,2.53,2.64,2.61,2.63,2.21,1.89,1.97,1.97] 





$ (document) .ready (function() { 


/ /创建 表格 框架 ， 包 括 标题 caption、 表 格 头 thead 和 表格 体 tbody 
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$ ("<table></table>") 
.html ("<caption></caption><thead></thead><tbody></tbody>") 
-appendTo ("body"); 


// 设 置 表格 的 标题 
$ ("caption") 
.html ("国内 桌面 浏览 器 排行 榜 (2015 年 ) <br/> (www.statcounter.com) ( 表 




















// 创 建 列 标题 行 theadTrNode， 并 将 其 加 入 表格 头 
Var theadTrNode=$ ("<tr></tr>") .append ("<th></th>") .appendTo ("thead"); 
// 创 建 表 头 单元 格 ， 并 设置 列 标题 〈 即 "Jan"、"Feb"、"Mar" 等 月 份 ) 
for (var i=0;i<data.colHeading.length;i++) 
$ ("<th></th>") .text (data.colHeading[i]) .appendTo (theadTrNode); 


// 在 表格 体 中 添加 数据 行 

for (var browser in data.percentages) { 
/ /创建 当前 数据 行 tbodyTrNode， 并 将 其 加 入 表格 体 
tbodyTrNode=$ ("<tr></tr>") .appendTo ("tbody"); 


/ /创建 包含 行 标题 ( 即 "chrome" 等 浏览 器 名 称 ) 的 单元 格 ， 并 将 其 加 入 当前 数据 行 
$ ("<td></td>") .text (browser) .appendTo (tbodyTrNode); 


// 创 建 包含 数值 (如 52.62、53.3 和 54.66 等 ) 的 数据 单元 格 ， 并 将 其 加 入 当前 数据 行 
for (var i=0;i<data.percentages [browser] .length;i++) 
$ ("<td></td>") 
.text (data.percentages [browser] [i]) 
.appendTo (tbodyTrNode); 
人 
3 
</script> 
</head> 
<body> 
</body> 
</html> 


在 本 例 作 为 ready 方法 参数 的 匿名 函数 中 ， 第 1 条 语句 使 用 了 分 行 且 缩 排 的 连 绥 编 程 
模式 。 首 先 调用 jQuery 的 构造 函数 $ 创 建 包装 table 元 素 的 jQuery 对 象 ， 然 后 通过 该 jQuery 
对 象 调用 html 方法 在 table 元 素 内 设置 了 html 字符 串 "<caption></caption><thead></thead> 
<tbody></tbody>" 一 一 实际 上 是 在 table 元 素 内 插入 了 caption、thead 和 tbody 三 个 HIML 
元 素 ， 最 后 继续 通过 该 jQuery 对 象 调用 appendTo 方法 将 table 元 素 插入 body 元 素 。 这 样 ， 
就 在 HIML 文档 主体 内 创建 了 包括 标题 、 表 格 头 和 表格 体 的 表格 框架 。 

第 3 条 语句 使 用 了 连 绥 编 程 模式 。 首 先 调 用 jQuery 的 构造 函数 $ 创 建 包装 tr 元 素 的 
jQuery 对 象 ， 然 后 通过 该 jQuery 对 象 调用 append 方法 在 tr 元 素 内 插入 也 元 素 ， 最 后 继续 
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通过 该 jQuery 对 象 调用 appendTo 方法 将 tr 元 素 插 入 thead 元 素 。 此 外 ， 该 语句 还 将 包装 
{元素 的 jQuery 对 象 赋值 给 变量 theadTrNode。 在 之 后 的 程序 中 ， 变 量 theadTrNode 就 指 代 
表格 头 中 的 列 标题 行 。 

第 4 条 语句 是 for 循环 语句 ， 用 于 遍历 数组 data.colHeading 中 的 数据 ， 即 "Jan"、"Feb"、 
"Mar" 等 月 份 。 在 第 it1 次 循环 中 ， 首 先 调用 jQuery 的 构造 函数 $ 创 建 包装 也 元 素 的 jQuery 
对 象 ， 然 后 通过 该 jQuery 对 象 调用 text 方法 设置 也 元 素 的 文本 内 容 (文本 内 容 来 自 数组 
data.colHeading 的 第 i+1 个 元 素 ， 如 "Jan") ， 最 后 继续 通过 该 jQuery 对 象 调用 appendTo 
方法 将 也 元素 插入 变量 theadTrNode 指 代 的 列 标题 行 。 

第 5 条 语句 是 for-in 循环 语句 ， 用 于 遍历 对 象 data.percentages 中 的 属性 名 和 属性 值 ， 
其 中 变量 browser 指 代 属 性 名 ， 即 "Chrome"、"Internet Explorer" 等 行 标题 。 在 该 for-in 循环 
语句 中 ， 又 有 三 条 语句 。 

(1) 第 1 条 语句 创建 一 个 数据 行 ， 并 将 其 加 入 表格 体 。 

(2) 第 2 条 语句 创建 一 个 包含 行 标题 ( 即 Chrome 等 浏览 器 名 称 ) 的 单元 格 ， 并 将 其 
加 入 当前 数据 行 。 

(3) 第 3 条 语句 是 for 循环 语句 ， 共 循环 12 次 。 每 次 创建 一 个 包含 百分比 的 数据 单元 
格 ， 并 将 其 加 入 当前 数据 行 。 至 此 ， 完 成 一 次 forin 循环 ， 并 在 表格 体内 插入 一 个 完整 的 
数据 行 。 

表 15-7 列 出 了 2015 年 12 月 国内 桌面 浏览 器 排行 榜 。 














表 15-7 国内 桌面 浏览 器 排行 榜 (2015 年 12 月 ) (www.statcountercom) 


浏览 器 
厂商 
占 比 (%) 






EE 
| 5686 | 19%9 | 742 | 5% | 44 | 197 | 117 | 00% 

在 网 页 中 ， 可 以 将 表 15-7 中 的 数据 用 条 形 图 展示 ， 如 图 15-3 所 示 。 其 中 ， 最 后 一 项 
“其 他 ”中 的 百分数 和 和 矩形 条 的 长 度 是 根据 表 15-7 中 的 数据 自动 生成 的 。 显 然 ， 用 条 形 
图 展示 数据 更 加 直观 、 生 动 。 





国内 来 机 浏览 器 排行 检 (2015 年 12 月 ) 


(www. statcounter. com) 





Chrome 5050 EE 
Internet Explorer 19.99% 
Sogou Explorer 7.42% 
Firefox 599% 
QQ Browser 4145%5 国 

Maxthon 9 用 

Safari Li7% | 

Opera 0.69% | 

其 他 工 754Y 有 目 











图 15-3 用 条 形 图 展示 表格 中 的 数据 
首先 ， 规 划 条 形 图 的 div 布局 及 其 示意 图 。 如 图 15-4 所 示 ， 将 整个 条 形 图 安排 在 
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barChart 盒子 中 ， 其 中 又 包含 chartHeading 和 chart 上 下 两 个 盒子 -将 条 形 图 的 标题 “ 国 
内 桌面 浏览 器 排行 榜 (2015 年 12 月 ) (www.statcountercom) ”安排 在 chartHeading 盒子 
中 ， 将 条 形 图 安排 在 chart 盒子 中 。 在 chart 盒子 中 ， 将 条 形 图 的 某 一 项 安排 在 一 个 item 售 
子 中 ， 一 个 item 盒子 又 包括 textString、percentage 和 rect 三 个 盒子 ， 分 别 用 于 设置 文本 串 
(如 Chrome) 、 百 分 数 〈 如 56.86) 和 矩形 条 。 
iv dbarChart™y 


Far id "chartheading" ;在 下 水 设置 秆 题 
Kdiv id= chart > 














Rdiv class="iten”> 








div class= textString’)| Kdiv class= percentage’)| Kdiv class= rect”y 
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图 15-4 条 形 图 的 布局 示意 图 


【 例 15-18】 JSON 应 用 之 二 : 动态 生成 条 形 图 。XHTML、CSS 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xXhtml1/VDTD/Vxhtm1l1-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 条 形 图 -动态 添加 节点 </title> 
<style type="text/css"> 
#barChart { width:582px; margin:20px auto; } 
#chartHeading { width:560px; padding:10px; border:lpx solid; 
text-align:center; font-weight:bolder; } 
#chart { width:530px; padding:25px; border:lpx solid; 
border-radius:8px; } 





.item { position:relative; height:25px; } 
.textstring{ float:left; width:180px; text-align:right; } 
-percentage{ float:left; width:70px; margin-right:30px; 
text-align:right; font-style:italic; } 
.rect { float:left; width:250px; height:lem; } 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
Var colors=["#00F", "#0FO0", "#AED", "#5FD", "#COO", "#603", "#66F", "#9CO", 
"#96C", "#8F8", "#366", "#DFA™", "#CCE", "#F88", "#FFC", "#888", "#FF6"]; 
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var data={ // 使 用 JSON 格式 组 织 数据 
"title":" 国 内 桌面 浏览 器 排行 榜 (2015 年 12 月 ) <br/> (www.statcounter.com) "， 
"browsers":["Chrome", "Internet Explorer", "Sogou Explorer", "Firefox", 
"QQ Browser","Maxthon","Safari","Opera"], 
"percentages":[56.86,19.99,7.42,5.99,4.14,1.97,1.17,0.69] 
}; 


$ (document) .ready (function() { 
$ ("#chartHeading") .html (data.title); 


for (var i=0,addUp=0.0;i<data.percentages.length;i++) 
addUp+=data.percentages [i]; // 计 算 累 计 百 分 比 addUp 


Var maxPercentage=((100-addUp)>data.percentages[0])? 
(100-addUp) :data.percentages[0]; 


if (addUp<99.999) { 
// 在 数组 data .browsers 中 增加 一 个 元 素 
data.browsers[data.browsers.1length]=" 其 他 "; 
// 在 数组 data .percentages 中 增加 一 个 元 素 
data.percentages [data.percentages.length]=100-addUp; 


for (i=0;i<data.browsers.length;i++) { 
Var textSstringNode=$ ("<div class='textstring'></div>") 
.text (data.browsers [i]); 
Var percentageNode=$ ("<div class="'percentage'></div>") 
.text (Math.ceil (data.percentages[i]*100)/100+"%"); 
var rectNode=$ ("<div class='rect'></div>") 
.Css("backgroundColor", colors[i]) 
.width (Math.ceil (data.percentages [i]/maxPercentage*250)+"px"); 
Var barNode=$ ("<div class='item'></div>") 
.append (textstringNode, percentageNode, rectNode); 


$("#chart") .append (barNode); 
} 
]) 
</script> 
</head> 
<body> 
<div id="barChart"> 
<div id="chartHeading"></div> 
<div id="chart"></div> 
</div> 
</body> 
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</html> 


在 本 例 HTML 文档 的 头 部 ， 对 照 如 图 15-4 所 示 的 布局 示意 图 ， 定 义 了 相应 的 ID 选择 
器 、 类 选择 器 及 其 对 应 的 CSS 规则 。 

在 HIML 文档 的 主体 ， 定 义 了 三 个 div 元 素 ， 并 且 id 属性 值 为 chartHeading 和 chart 
的 两 个 div 元 素 是 id 属性 值 为 barChart 的 div 元 素 的 子 元 素 。 因 此 ，chartHeading 和 chart 
盒子 在 barChart 盒 子 内 部 。 这 与 图 15-4 中 的 div 布局 规划 相 一 致 。 除 这 三 个 div 元 素 之 外 ， 
在 HTML 文档 的 主体 没有 其 他 的 元 素 和 文本 。 因 此 ， 条 形 图 的 标题 、 文 本 串 、 百 分 数 和 
矩形 条 需要 在 jQuery 程序 中 动态 生成 。 

在 本 例 的 jQuery 程序 中 ， 首 先 使 用 JSON 格式 组 织 相关 数据 ， 并 将 其 赋值 给 colors 和 
data 两 个 全 局 变量 。colors 表示 一 个 数组 ， 其 中 的 一 个 元 素 对 应 条 形 图 中 的 一 项 及 其 矩形 
条 颜色 。data 表示 一 个 对 象 ， 该 对 象 有 三 个 属性 : 

(1) 属性 title 的 值 是 一 个 字符 串 " 国 内 桌面 浏览 器 排行 榜 (2015 年 12 月 ) <br> (www. 
statcountercom) "， 该 字符 串 用 data.title 表示 。 

(2) 属性 browsers 的 值 用 data.browsers 表示 且 是 一 个 数组 ， 其 中 的 元 素 用 data. 
browsers[index] 表 示 。 

(3) 属性 percentages 的 值 用 data.percentages 表示 且 也 是 一 个 数组 ， 其 中 的 元 素 用 
data.percentages[index] 表 示 。 

数组 data.browsers 中 的 元 素 及 其 值 与 数组 data.percentages 中 的 元 素 及 其 值 一 一 对 应 ， 
因此 这 两 个 数组 的 长 度 相等 。 此 外 ， 数 组 data.percentages 中 的 百分数 依次 递减 。 

在 作为 ready 方法 参数 的 匿名 函数 中 ， 第 1 条 语句 调用 html 方法 设置 条 形 图 的 标题 。 

第 2 条 语句 是 一 条 for 语句 ， 用 于 遍历 数组 data.percentages 中 的 元 素 ， 同 时 计算 累计 
百分比 并 保存 于 变量 addUp。 

第 3 条 语句 使 用 条 件 运算 符 求 得 最 大 的 百分数 并 保存 于 变量 maxPercentage。 

第 4 条 语句 是 一 条 让 语句 。 如 果 累 计 百 分 比 addUp 足够 小 ， 则 需要 在 数组 data.browsers 
和 数组 data.percentages 中 分 别 增 加 一 个 元 素 。 

第 5 条 语句 也 是 一 条 for 语句 ， 用 于 遍历 数组 data.browsers 中 的 元 素 〈 同 时 也 遍历 数 
组 data. percentages 中 的 元 素 )。 在 该 for 循环 语句 中 ， 又 有 五 条 语句 。 

(1) 第 1 条 语句 创建 一 个 包含 文本 串 〈 如 Chrome) 的 div 元 素 。 

(2) 第 2 条 语句 创建 一 个 包含 百分数 的 div 元 素 。 

(3) 第 3 条 语句 创建 一 个 代表 矩形 条 的 div 元 素 ， 除 设置 背景 颜色 外 ， 还 根据 对 应 的 
百分数 设置 矩形 条 的 宽度 ， 但 每 个 矩形 条 的 宽度 不 会 超过 最 大 百分数 对 应 的 矩形 条 的 
宽度 。 

(4) 第 4 条 语句 创建 包含 一 个 项 目 (item) 的 div 元 素 ， 然 后 在 其 内 部 依次 插入 在 前 
三 条 语句 中 创建 的 、 包 含 文本 框 、 百 分 数 和 代表 矩形 条 的 三 个 div 元 素 。 

(5) 第 5 条 语句 在 id 属性 值 为 chart 的 div 元 素 内 插入 在 前 一 条 语句 中 创建 的 、 包 含 
一 个 项 目 (item) 的 div 元 素 。 


注意 : 执行 语句 data.browsers[data.browsers.length]=" 其 他 "， 可 以 在 数组 data.browsers 
中 增加 一 个 元 素 。 换 言 之 ， 在 增加 数组 data.browsers 的 长 度 的 同时 ， 将 字符 串 " 其 他 "赋值 
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给 新 增加 的 最 后 一 个 元 素 。 
(5 更 多 应 用 举例 


在 JavaScript 中 ， 数 组 是 一 种 特殊 的 对 象 ， 并 且 可 以 调用 sort 方法 对 数组 中 的 元 素 进 
行 排序 。 在 jQuery 编程 中 ， 通 过 数组 对 象 调用 sort 方 法 、 同 时 使 用 闭 包 和 内 部 函数 ， 可 以 
实现 表格 数据 排序 的 功能 。 为 此 ， 需 要 首先 了 解 在 JavaScript 中 如 何 实现 数组 排序 。 


15.6.1 简单 数组 排序 


在 JavaScript 中 ， 数 组 排序 可 以 分 为 简单 数组 排序 和 对 象 数组 排序 两 种 情况 。 在 简单 
数组 中 ， 所 有 元 素 的 类 型 或 者 都 是 number， 或 者 都 是 string。 
【 例 1S-19】 简单 数组 排序 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtml1VDTD/Vxhtml1-strict.dtd"> 
<html Xmlns="http://www.wW3.org/1999/Xhtm1"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 简 单数 组 排序 </title> 
</head> 
<body> 
<script type="text/javascript"> 
var weight=[111,75,60,103,55]; // 简 单数 组 ， 数 组 中 每 个 元 素 是 一 个 整数 
document .write ("数组 中 元 素 的 初始 顺序 ，") ; 
for (var i=0;i<weight.length;i++) document .write (weight [i]+" "); 
document .write ("<br/><br/>"); 


// 直 接 排序 时 ， 首 先 将 数组 weight 中 的 数据 转换 为 字符 串 数据 ， 然 后 再 排序 
weight .sort(); 

document .write (" 按 字符 串 数据 排序 后 : ") ; 

for (i=0;i<weight.length;i++) document .write (weight [i]+" ")7 
document .write ("<br/><br/>"); 


function compareFunction(el,e2) { // 首 先 定义 比较 函数 compareFunction 
return parseInt (el)-parseInt (e2); 

} 

weight .sort (compareFunction) ;// 然 后 依据 比较 函数 compareFunction 的 返回 值 排序 

// 如 果 compareFunction (el,e2) 小 于 0， 元素 el 排 在 元 素 e2 之 前 

// 如 果 compareFunction (el,e2) 等 于 0， 元素 el 和 元 素 e2 的 前 后 顺序 不 变 

// 如 果 compareFunction (el,e2) 大 于 0， 元 素 el 排 在 元 素 e2 之 后 
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document -write (" 按 数值 (整数 ) 升序 排序 后 : ") ; 
for (i=0;i<weight.length;i++) document .write (weight [i]+" ") 7 
document .write ("<br/><br/>"); 


// 颠 倒数 组 中 元 素 的 位 置 。 第 1 个 元 素 成 为 最 后 一 个 ， 第 2 个 元 素 成 为 倒数 第 2 个 …. 最 后 一 
个 元 素 成 为 第 1 个 

weight .reverse(); 

document .write ("颠倒 数组 中 元 素 的 位 置 ( 即 相当 于 降序 排序 ) 后: "); 

for (i=0;i<weight.length;i++) document .write (weight[i]+" "); 
document .write ("<br/><br/>"); 


</script> 
</body> 
</html> 
在 本 例 中 , weight=[111,75,60,103,55] 是 一 个 简单 数组 ， 数 组 中 每 个 元 素 是 一 个 表示 体 
重 的 整数 。 


当 直 接 调用 sort 方法 对 数组 weight 进行 排序 时 ，, sort 方法 首先 将 数组 weight 中 的 整数 
转换 为 字符 串 数据 然后 再 排序 ， 此 后 数组 中 元 素 的 顺序 变 为 103 111 55 60 75。 

也 可 以 首先 定义 比较 函数 compareFunction(el,e2)， 然 后 在 调用 sort 方法 时 将 比较 函数 
compareFunction 作为 参数 , 这样 可 以 依据 比较 函数 compareFunction 的 返回 值 对 数组 weight 
进行 排序 。 此 时 ， 如 果 compareFunction(el,e2) 小 于 0， 元 素 el 排 在 元 素 e2 之 前 ， 如 果 
compareFunction(el,e2) 等 于 0， 元素 el 和 元 素 e2 的 前 后 顺序 不 变 ; 如 果 
compareFunction(el,e2) 大 于 0， 元 素 el 排 在 元 素 e2 之 后 。 此 后 , 数组 中 元 素 的 顺序 将 变 为 
55 60 75 103 111。 显 然 ， 这 种 排序 结果 符合 Weight 升序 的 实际 含义 。 

最 后 ， 通 过 数组 对 象 weight 继续 调用 reverse 方法 ， 可 以 颠倒 数组 中 元 素 的 位 置 。 此 
时 ， 数 组 中 元 素 的 顺序 将 变 为 111 103 75 60 55。 显 然 ， 这 种 排序 结果 符合 Weight 降序 的 
实际 含义 。 


15.6.2 ”对 象 数组 排序 


在 对 象 数组 中 ， 每 个 元 素 表示 一 个 对 象 ， 每 个 对 象 又 拥有 相同 的 属性 。 对 于 对 象 数 
可 以 按照 某 一 个 属性 及 其 属性 值 排序 。 
【 例 15-20】 对 和 象 数组 排序 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http:/V/www.w3 .org/TR/XhtmlL1VDTD/Vxhtml1-strict.dtd"> 
<htm1l xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 对 象 数组 排序 </title> 
</head> 
<body> 
<script type="text/javascript"> 


组 
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// 对 象 数组 ， 即 数组 中 每 个 元 素 表示 一 个 对 象 (人 ) 
// 每 个 对 象 (人) 又 拥有 3 个 属性 (name、birthday 和 weight) 及 其 属性 值 
Var peoples=[ 
{f"name":"James"，"birthday":"Sep 16, 1993", "weight":111}, 
{"name":"Tom", "birthday":"Nov 29, 1992", "weight":75}, 
{"name":"Alice", "birthday":"Sep 15, 1992", "weight":60}, 
{"name":"Edward", "birthday":"Nov 18, 1991", "weight":103}, 
{"name":"Catherine", "birthday":"Dec 30, 1992", "weight":55} 
I 
function outputPeoples() { 
for ( var i=0;i<peoples.length;i++) { 
for (var prop in peoples[i]) 
document .write (peoples[i] [prop]+" "); 
document .write ("<br/>"); 
} 
document .write ("<br/>"); 
} 
document .write (" 对 象 数组 中 元 素 的 原始 顺序 : <br/>"); 
outputPeoples () 


// 将 属性 值 attrVal 转换 为 参数 dataType 所 指定 类 型 的 数据 
function convert (attrVal, dataType) { 
Var reVal; 


Switch (dataType) { 
case "date": reVal=new Date (attrVal) 
break; 
case "int": reVal=parseInt (attrVal); 
break; 
default: reVal=attrVal.tostring(); 


return reVal; 


// 定 义 比较 函数 ， 比 较 两 个 对 象 ( 人 ) 的 名 字 
function compareName (pl,p2) { 

Var reVal; 

Var keyl=convert (P1 .name, "string") 7 


Var key2=convert (p2.name,"string"); 


if (keyl>key2) reVal=17 
else 
if (keyl==key2) reVal=0; 


else reVal=-1; 
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return reVal7 
} 
peoples.sort (compareName); // 依 据 比较 函数 compareName 的 返回 值 排序 
document -write (" 按 名 字 升 序 排序 后 : <br/>"); 
outputPeoples (); 


peoples.reverse();  // 颠 倒 对 象 数组 中 元 素 的 位 置 
document .write (" 按 名 字 降 序 排序 后 : <br/>"); 
outputPeoples (); 


// 定 义 比较 函数 ， 比 较 两 个 对 象 (人) 的 出 生日 期 
function compareBirthday (pl,p2) { 
Var keyl=convert (pl.birthday, "date"); 
Var key2=convert (p2.birthday, "date"); 
return keyl-key2; 
} 
peoples.sort (compareBirthday); // 依 据 比较 函数 compareBirthday 的 返回 值 排序 
document .write (" 按 生日 排序 后 : <br/>")，; 
outputPeoples () 


// 定 义 比 较 函 数 ， 比 较 两 个 对 象 (人 ) 的 体重 
function compareWeight (pl,p2) { 
var keyl=convert (pl.weight, "int"); 
Var key2=convert (p2.weight, "int"); 
return keyl-key2; 
} 
peoples.sort (compareWeight); // 依 据 比 较 函 数 compareWeight 的 返回 值 排 序 
document .write(" 按 体重 (整数 ) 升序 排序 后 : <br/>"); 
outputPeoples (); 
</script> 
</body> 
</html> 


在 本 例 中 ， 定 义 了 对 象 数组 peoples。 在 该 数组 中 ， 每 个 元 素 表示 一 个 对 象 (人 ) ， 每 
个 对 象 ( 人 ) 又 拥有 三 个 属性 (name、birthday 和 weight) 及 其 属性 值 。 换言之 , 数组 peoples 
中 的 每 个 元 素 是 一 项 包含 了 三 个 属性 值 (Name、Birthday 和 Weight) 的 对 象 数据 。 调 用 函 
数 outputPeoples， 可 以 输出 对 象 数组 peoples 中 的 各 项 数据 。 

为 了 根据 某 项 属性 值 比较 对 象 数组 peoples 中 的 对 象 ( 人 )， 首 先 定 义 了 函数 
convert(attrVal,dataType)， 该 函数 可 以 将 属性 值 attrVal 转换 为 参数 dataType 所 指定 类 型 的 

在 函数 convert 的 基础 上 ， 又 定义 了 比较 函数 compareName， 用 于 按照 字符 串 比 较 两 
个 对 象 (人) 的 Name 属性 值 。 这 样 ， 在 调用 sort 方法 时 将 比较 函数 compareName 作为 参 
数 ， 即 可 按照 Name 升序 实现 对 象 数组 peoples 的 排序 。 紧 接着 调用 reverse 方法 ， 即 可 颠 
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倒 对 象 数组 peoples 中 元 素 的 位 置 ， 即 按照 Name 降序 排序 对 象 数组 peoples。 

同 理 ， 在 函数 convert 的 基础 上 ， 定 义 了 比较 函数 compareBirthday， 用 于 按照 日 期 比 
较 两 个 对 象 ( 人 ) 的 Birthday 属性 值 。 这 样 , 在 调用 sort 方法 时 将 比较 函数 compareBirthday 
作为 参数 ， 即 可 按照 Birthday 顺序 实现 对 象 数组 peoples 的 排序 。 

同 理 ， 在 函数 convert 的 基础 上 ， 定 义 了 比较 函数 compareWeight， 用 于 按照 整数 比较 
两 个 对 象 (人) 的 Weight 属性 值 。 这 样 ， 在 调用 sort 方法 时 将 比较 函数 compareWeight 作 
为 参数 ， 即 可 按照 Weight 顺序 实现 对 象 数组 peoples 的 排序 。 


15.6.3 闭 包 和 内 部 函数 


所 谓 闭 包 (closure)， 简 单 地 说 就 是 在 函数 体 中 访问 在 定义 该 函数 时 已 经 存在 的 变量 。 
【 例 15-21】 闭 包 定义 及 内 部 函数 。XHTML 及 JavaScript 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/Xhtm11/VDTD/Vxhtm11-strict.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 闭 包 及 内 部 函数 </title> 
</head> 
<body> 
<script type="text/javascript"> 
var str=" 显 示 蓝 色 字符 申 "; ”//str 是 全 局 变量 
function showBlue() { 
// 在 函数 体 中 访问 外 部 已 经 存在 的 全 局 变量 str 
return "<P style='color:blue;'>"+str+"</p>"; 
} 
document .write (showBlue ()); 


function outputText (txt) { 
function showRed() { // 函 数 showRed 是 在 函数 outputText 中 定义 的 内 部 函数 
// 在 内 部 函数 showRed 的 函数 体 中 访问 外 部 函数 outputText 的 参数 txt 
return "<p style='color:red;'>"+txt+"</p>"; 
} 
document .write (showRed () ) 
} 
outputText ("显示 红色 字符 串 ") ; 
</script> 
</body> 
</html> 


在 本 例 的 JavaScript 中 ， 在 函数 showBlue 的 函数 体 中 可 以 访问 外 部 已 经 存在 的 全 局 变 


量 str。 
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函数 showRed 是 在 函数 outputText 的 函数 体 中 定义 的 内 部 函数 (inner fonction) 。 相 
对 于 函数 showRed， 函 数 outputText 是 外 部 函数 〈outer function) 。 在 内 部 函数 showRed 
的 函数 体 中 可 以 访问 外 部 函数 outputText 的 参数 txt。 

无 论 是 在 函数 体 中 访问 全 局 变量 ， 还 是 在 内 部 函数 的 函数 体 中 访问 外 部 函数 的 参 
数 ， 都 是 闭 包 的 具体 形式 ， 都 可 以 理解 为 JavaScript 函数 可 以 “ 记 住 ” 它 被 创建 时 候 的 
环境 。 

在 JavaScript 中 ， 函 数 是 一 种 特殊 的 类 型 可 以 先 定义 函数 再 将 函数 名 赋值 给 一 个 
变量 ，JavaScript 的 这 一 功能 扩展 了 闭 包 的 应 用 范围 。 

【 例 15-22】 返回 函数 及 闭 包 应 用 。XHTML 及 JavaScript 代码 如 下 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 


<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 





<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 返 回 函 数 及 闭 包 应 用 </title> 
</head> 
<body> 
<script type="text/javascript"> 
function makeAdder (x) { 
// 函 数 makeAdder 返回 一 个 匿名 函数 ， 该 匿名 函数 也 是 一 个 内 部 函数 
return function(y) { 
// 在 匿名 函数 的 函数 体 中 访问 外 部 函数 makeAdder 的 参数 x 
alert ("x="+x+", y="+y);? 
return X+Y7 
] 7 
} 


var add5=makeAdder (5); // x=5， 变 量 add5 的 类 型 ? 


alert(add5(2)); // y=2 
</script> 
</body> 
</html> 


在 本 例 的 JavaScript 中 ， 首 先 定义 了 函数 makeAdder。 函 数 makeAdder 返回 一 个 匿名 
函数 ， 该 匿名 函数 也 是 一 个 内 部 函数 。 在 匿名 函数 的 函数 体 中 访问 外 部 函数 makeAdder 的 
参数 x， 或 者 说 ， 外 部 函数 makeAdder 通 过 其 参数 x 向 内 部 的 匿名 函数 提供 了 一 个 操作 数 ， 
这 是 一 个 闭 包 应 用 。 

然后 ， 以 函数 调用 的 形式 并 通过 一 条 赋值 语句 将 函数 makeAdder 赋 值 给 变量 add5， 其 
中 函数 调用 makeAdder(5) 中 的 实际 参数 5 就 是 外 部 函数 makeAdder 向 内 部 的 匿名 函数 提供 
的 操作 数据 ， 即 x=5。 这 样 ，add5 相当 于 一 个 函数 名 ， 并 且 表 示 上 述 的 匿名 函数 。 当 然 ， 
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变量 add5 的 类 型 也 就 是 function。 这 条 赋值 语句 的 作用 等 价 于 以 如 下 形式 定义 函数 add5: 
function add5(y) { 
alert ("x="+5+", y="+y); 
return X+Y7 
} 


在 最 后 一 条 语句 中 ，add5(2) 可 以 看 作 是 对 上 述 匿 名 函数 的 调用 ， 实 际 参数 2 对 应 匿名 
函数 的 形式 参数 y。 


15.6.4 ”表格 数据 排序 


在 了 解 对 象 数 组 排序 、 闭 包 和 内 部 函数 等 基础 知识 之 后 ， 即 可 结合 jQuery 编程 实现 
表格 数据 排序 的 功能 。 如 图 15-5 所 示 ， 当 用 鼠标 单 击 Name 表 头 单元 格 时 ， 表 格 体 中 的 数 
据 将 按照 Name 的 顺序 重新 布置 ， 当 单 击 Birthday 表 头 单元 格 时 ， 表 格 体 中 的 数据 将 按照 
Birthday 的 顺序 重新 布置 ， 当 单 击 Weight 表 头 单元 格 时 ， 表 格 体 中 的 数据 将 按照 Weight 
的 顺序 重新 布置 。 如 果 连 续 两 次 单 击 同一 表 头 单元 格 ， 表 格 体 中 的 数据 将 按照 相反 的 顺序 






















































































ROSTER ROSTER 
Name Birthday | Weight (kg) Name Birthday | Weight (kg) 
James Sep 16, 1993 | 111 Alice Sep 15, 1992 | 60 
Tom Nov 29, 1992 | 75 Catherine | Dec 30, 1992 | 55 
Alice Sep 15, 1992 | 60 Edward Nov 18，1991 | 103 
Edward Nov 18，1991 | 103 James Sep 16, 1993 | 111 
Catherine | Dec 30, 1992 | 55 Tom Nov 29, 1992 | 75 
(a) 初始 的 表格 数据 布置 (b) 按 Name 排序 后 的 表格 数据 布置 
ROSTER ROSTER 
Name Birthday | Weight (kg) Name Birthday | Weight (kg) 
Edward Nov 18，1991 | 103 Catherine | Dec 30，1992 | 55 
Alice Sep 15，1992 | 60 Alice Sep 15，1992 | 60 
Tom Nov 29，1992 | 75 Tom Nov 29，1992 | 75 
Catherine | Dec 30，1992 | 55 Edward Nov 18，1991 | 103 
James Sep 16, 1993 | 111 James Sep 16, 1993 | 111 
(c) 按 Birthday 排序 后 的 表格 数据 布置 (d) 按 Weight 排序 后 的 表格 数据 布置 


15-5 ”表格 数据 排序 


注意 : 表格 体 中 的 每 行 数据 对 应 一 个 对 象 ( 人 ) 的 三 个 属性 值 (Name、Birthday 和 
Weight ) 。 


【 例 15-23】 表格 数据 排序 。XHTML、JavaScript 及 jQuery 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 表 格 数据 排序 </title> 
<style type="text/css"> 

table { margin:20px auto; border-collapse:collapse; } 

th,td { padding:2px 1l0px; border:lpx solid; } 

th { cursor:pointer; } /* 样式 特性 cursor 定义 光标 形状 (pointer) */ 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 

// 表 格 中 对 应 列 的 数据 类 型 


Var dataTypes=["string", "date", "int"]; 


// 将 字符 串 数据 stringData 转换 为 参数 dataType 所 指定 类 型 的 数据 
function convert (stringData,dataType) { 
Var reVal; 


Switch (dataType) { 
case "date": reVal=new Date (stringData) 7 
break; 
case "int": reVal=parseInt (stringData); 
break; 
default: reVval=stringData.tostring(); 


return reVal; 


// 定 义 比较 函数 ， 参 数 col 对 应 表格 中 的 列 序号 ， 列 序号 从 0 开始 
function compareFn(col) { 
return function (trl,tr2) { 
Var reVal; 
var keyl=convert (trl.cells[col].innerText,dataTypes[col]); 
Var key2=convert (tr2.cells[col] .innerText,dataTypes[col1]); 


if (keyl>key2) reVal=17 
else 
if (keyl==key2) reVal=0; 
else reVal=-1; 


return reVal7 


}; 


$ (document) .ready (function() { 


Var table=$ ("#roster"™"); 
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Var tbody=$ ("#roster tbody"); 
var dataRows=$ ("#roster tbody tr"); // 获 取 表格 体 中 的 所 有 数据 行 


var trsArray=new Array; // 将 所 有 数据 行 转 存 于 Javascript 数组 trsRrray 
for (var i=0;i<dataRows.length;i++) trsArray[i]=dataRows[i]; 


/ /表格 数据 排序 ，co1l 表示 对 应 列 的 序号 (从 0 开始 ) 
$ ("#roster th") .each (function (col) { 
$ (this) .click(function() { 
// 判 断 连续 两 次 是 否 按照 同一 个 列 排序 
if (table.lastSortCol==col)  // 如 果 是 同一 列 
trsRArray.reverse () ;  // 颠 倒数 组 中 元 素 ( 行 ) 的 位 置 
else ”// 如 果 不 是 同一 列 ， 调 用 sort 方法 (同时 传递 比较 函数 ) 


trsArray.sort (compareFn (col)) 7 


// 将 数组 trsArray 中 的 数据 行 加 入 表格 体 
for (i=0;i<trsArray.length;i++) tbody.append (trsArray[i]); 


table.lastSortCol=col; ”// 记 录 最 新 一 次 排序 的 列 序号 
}) 
]) 
1); 
</script> 
</head> 
<body> 
<table id="roster"> 
<caption>ROSTER</caption> 
<thead> 
<tE> 
<th>Name</th><th>Birthday</th><th>Wweight (kg) </th> 
</tr> 
</thead> 
<tbody> 
ELS 
<td>James</td><td>Sep 16, 1993</td><td>111</td> 
</tr> 
<tr> 
<td>Tom</td><td>Nov 29, 1992</td><td>75</td> 
</tr> 
Er 
<td>Alice</td><td>sep 15, 1992</td><td>60</td> 
</tr> 
Er 
<td>Edward</td><td>Nov 18, 1991</td><td>103</td> 
eAEES 
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<tr> 
<td>Catherine</td><td>Dec 30, 1992</td><td>55</td> 
EE 
</tbody> 
</table> 
</body> 
</html> 


在 本 例 内 部 样式 表 的 第 3 条 CSS 规则 中 ， 样 式 特性 cursor 定义 鼠标 落 在 一 个 也 元素 
边界 范围 内 时 的 光标 形状 一 一 指针 (pointer) 。 这 样 ， 当 鼠标 落 在 表 头 单元 格 时 ， 光 标 会 
变 为 指针 形状 。 

在 HIML 文档 头 部 的 JavaScript 中 定义 了 如 下 全 局 变量 和 函数 。 

(1) 全 局 变量 dataTypes 是 一 个 字符 串 型 数组 ， 该 数组 定义 了 表格 中 对 应 列 的 数据 类 
型 一 Name 列 的 数据 类 型 为 字符 串 (string) ，Birthday 列 的 数据 类 型 为 日 期 (date) ， 
Weight 列 的 数据 类 型 为 整数 (int) 。 

(2) 函数 convert(stringData,dataType) 将 字符 串 数据 stringData 转换 为 参数 dataType 所 
指定 类 型 的 数据 。 

(3) 函数 compareFn 的 参数 col 对 应 表格 中 的 列 序号 一 一 列 序号 从 0 开始 ,第 1 列 
Name 的 序号 为 0， 第 2 列 Birthday 的 序号 为 1， 第 3 列 Weight 的 序号 为 2。 函 数 compareFn 
的 返回 值 又 是 在 其 内 部 定义 的 匿名 函数 的 返回 值 。 实 际 上 ， 函 数 compareFn 以 及 在 其 内 部 
定义 的 匿名 函数 共同 构成 了 一 个 比较 函数 ， 用 于 比较 表格 体 中 的 两 行 数据 ， 这 两 行 数据 分 
别 存储 于 匿名 函数 的 参数 trl 和 tr2 中 ， 每 行 数据 又 包含 一 个 对 象 (人 ) 的 三 个 属性 值 
(Name、Birthday 和 Weight) 。 而 函数 compareFn 的 参数 col 对 应 于 对 象 ( 人 ) 数据 中 的 关 
键 字 一 一 当 参 数 col 为 0 时 ， 将 按照 关键 字 Name 比较 两 行 对 象 数据 ， 当 参数 col 为 1 时 ， 
将 按照 关键 字 Birthday 比较 两 行 对 象 数 据 ， 当 参数 col 为 2 时 ， 将 按照 关键 字 Weight 比较 
两 行 对 象 数据 。 此 外 ， 在 比较 函数 中 调用 函数 convert 时 ， 第 1 个 实际 参数 
trl.cells[col].innerText 即 是 关键 字 ， 但 是 依据 列 序号 col 从 HIML 文档 中 提取 的 ， 因 此 其 
值 是 字符 串 数据 ， 需 要 转换 为 第 2 个 实际 参数 dataTypes[col] 所 指定 类 型 的 数据 。 

在 作为 ready 方法 参数 的 匿名 函数 中 ， 局 部 变量 table、tbody 和 dataRows 指向 通过 调 
用 jQuery 构造 函数 $ 获 取 的 jQuery 对 象 ， 且 依次 指 代 表格 、 表 格 体 和 表格 体 中 的 所 有 数据 
行 。 而 局 部 变量 trsArray 则 指向 一 个 JavaScript 数 组 对 象 ， 并 通过 一 个 for 循环 将 dataRows 
所 指向 jQuery 对 象 中 的 所 有 数据 行 转 存 于 trsArray 所 指向 的 JavaScript 数组 对 象 。 这 样 ， 
trsArray 也 就 是 一 个 对 象 数组 ， 其 中 的 每 个 元 素 表示 一 个 对 象 (人) ， 每 个 对 象 (人 ) 又 
拥有 三 个 属性 (Name、Birthday 和 Weight) 及 其 属性 值 。 换 言 之 ， 数 组 trsArray 中 的 每 个 
元 素 是 一 项 包含 了 三 个 属性 值 (Name、Birthday 和 Weight) 的 对 象 数据 。 

在 作为 ready 方法 参数 的 匿名 函数 中 ， 最 主要 的 是 通过 jQuery 对 象 $(" 扩 oster th") 调 
用 each(function(coD {.…} ) 方 法 ， 这 样 可 以 依次 访问 该 jQuery 对 象 所 包装 的 也 元 素 对 象 ， 
同时 为 每 个 也 元 素 对 象 执行 匿名 函数 function(col) {...}， 其 中 的 参数 col 表示 也 元 素 对 象 
的 下 标 〈 也 是 也 元素 对 象 对 应 的 列 序号 ) 。 在 匿名 函数 function(col) {..….} 中 ，S$(this) 表 示 
一 个 也 元 素 对 象 。 代 码 $(this).click(function0 {.…} ) 的 含义 及 作用 是 : 当 用 鼠标 单 击 一 个 
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表 头 单元 格 时 ， 将 调用 一 个 匿名 的 click 事件 处 理 函 数 。 在 该 click 事件 处 理 函数 中 ， 首 先 
判断 是 否 连续 两 次 按照 同一 列 排序 〈 即 判断 是 否 连续 两 次 单 击 同一 表 头 单元 格 ) 一 一 如 果 
是 同一 列 〈 即 连续 两 次 单 击 同一 表 头 单元 格 ) ， 则 颠倒 数组 trsArray 中 元 素 〈 对 象 数据 ) 
的 位 置 ， 如 果 不 是 同一 列 《〈 即 两 次 单 击 不 同 的 表 头 单元 格 ) ， 则 调用 sort 方法 对 数组 
trsArray 中 的 元 素 〈 对 象 数据 ) 进行 排序 ， 然 后 通过 一 个 for 循环 将 数组 trsArray 中 新 的 数 
据 行 加 入 表格 体 ， 最 后 将 最 新 一 次 排序 的 列 序号 赋值 给 table 所 指向 jQuery 对 象 的 
lastSortCol 属性 。 


注意 : 

@ 在 定义 比较 函数 compareFn 时 应 用 了 闭 包 和 内 部 函数 一 调用 外 部 函数 
compareFn， 可 以 返回 一 个 在 其 内 部 定义 的 匿名 函数 ; 在 匿名 函数 的 函数 体 中 访问 外 部 函 
数 compareFn 的 参数 col。 

@@) 在 作为 ready 方法 参数 的 匿名 函数 中 ， 局 部 变量 dataRows 指向 通过 调用 jQuery 构 
造 函 数 $ 获 取 的 jQuery 对 象 ， 因 此 不 能 通过 dataRows 调用 reverse 和 sort 方法 。 而 局 部 变 
量 trsArray 则 指向 一 个 JavaScript 数组 对 象 ， 因 此 可 以 通过 trsArray 调用 reverse 和 sort 方法 。 

@ 当 第 1 次 执行 语句 table.lastSortCol=col 时 ， 实 际 上 是 首先 为 table 所 指向 的 jQuery 
对 象 添 加 lastSortCol 属性 ， 然 后 将 lastSortCol 属性 赋值 为 col。 

@ 在 jQuery 编程 中 ， 经 常 既 有 纯 JavaScript 代码 ， 又 有 jQuery 代码 。 如 在 本 例 中 ， 
函数 convert 和 compareFn 中 的 代码 就 是 纯 JavaScript 代 码 ， 而 $(document).ready(function() 
{...}) 中 的 代码 主要 是 jQuery 代码 。 


@ 


jQuery 是 一 个 “ 写 得 更 少 ， 做 得 更 多 ”的 JavaScript 库 (Library) 。 使 用 jQuery API 
提供 的 方法 及 其 功能 ， 能 够 在 不 同 厂商 的 Web 浏 览 器 上 轻松 地 完成 事件 处 理 、 选 取 HIML 
DOM 元 素 对 象 和 DOM 操作 等 任务 ， 从 而 简化 了 Web 前端 开发 工作 。 

作为 一 种 函数 式 编程 语言 ， 在 JavaScript 中 ， 不 仅 可 以 将 函数 当 作 变 量 使 用 ， 而 且 多 
许 将 一 个 函数 作为 参数 传递 给 另 一 个 函数 ， 这 也 是 从 JavaScript 转换 到 jQuery 的 起 点 。 

jQuery 是 一 个 兼容 多 种 浏览 器 的 JavaScript 库 。 换 言 之 ， 在 一 个 厂商 某 个 版 本 的 Web 
浏览 器 上 正常 执行 的 jQuery 程序 在 同一 厂商 不 同 版 本 或 男 一 厂商 的 Web 浏览 器 上 大 都 能 

调用 jQuery 构造 函数 $ 的 最 主要 目的 就 是 ， 依 据 指定 的 选择 器 在 HIML 文档 树 中 选取 
特定 的 HIML DOM 元 素 对 象 ， 然 后 通过 jQuery 对 象 对 所 选取 的 HTML DOM 元 素 对 象 进 
行 相应 的 操作 。 此 外 ,调用 jQuery 的 构造 函数 $ 还 可 以 创建 包装 HIML 元 素 对 象 的 jQuery 
对 象 。 

选择 器 、 操 作 、 与 事件 关联 的 方法 以 及 对 应 的 事件 处 理 函 数 构成 了 jQuery 程序 的 基 
本 要 素 。 

为 了 实现 用 户 与 Web 浏览 器 之 间 的 交互 ， 在 jQuery 中 预定 义 了 一 些 与 事件 及 其 处 理 
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有 关 的 方法 。 通 过 jQuery 对 象 (尤其 是 包装 HIML DOM 元 素 对 象 的 jQuery 对 象 ) 调用 这 
些 方法 ， 可 以 将 一 个 匿名 函数 与 在 特定 的 对 象 ( 尤 其 是 HTML DOM 元 素 对 象 ) 上 发 生 的 
某 个 事件 绑 定 在 一 起 。 

CSS 选 择 器 、 伪 类 以 及 结合 符 大 都 既 可 以 在 CSS 样式 表 的 规则 中 使 用 ， 也 可 以 出 现在 


jQuery 构造 函数 $ 的 参数 中 。 
通过 jQuery 对 象 调 用 each 方法 ， 可 以 依次 访问 jQuery 对 象 所 包装 的 每 个 HTML DOM 
元 素 对 象 。 


JSON 是 一 种 在 Web 中 广泛 应 用 的 、 轻 量 级 的 数据 组 织 和 交换 格式 。 

在 JavaScript 或 jQuery 程序 中 ， 可 以 使 用 for 语句 遍历 数组 中 的 数据 (下 标 和 元 素 ) ， 
而 使 用 forin 语句 遍历 对 象 中 的 数据 (属性 名 和 属性 值 。 

在 jQuery 编程 中 ， 通 过 数组 对 象 调用 sort 方法 , 同时 使 用 闭 包 和 内 部 函数 ， 可 以 实现 
表格 数据 排序 的 功能 。 

所 谓 闭 包 ， 简 单 地 说 就 是 在 函数 体 中 访问 在 定义 该 函数 时 已 经 存在 的 变量 。 无 论 是 
在 函数 体 中 访问 全 局 变量 ， 还 是 在 内 部 函数 的 函数 体 中 访问 外 部 函数 的 参数 ， 都 是 闭 包 的 
具体 形式 ， 都 可 以 理解 为 JavaScript 函数 可 以 “ 记 住 ” 它 被 创建 时 候 的 环境 。 

在 内 部 函数 的 函数 体 中 访问 外 部 函数 的 参数 ， 也 可 以 理解 为 外 部 函数 通过 其 参数 x 向 
内 部 函数 提供 操作 数 。 

在 JavaScript 中 ， 函 数 是 一 种 特殊 的 类 型 ， 既 可 以 将 匿名 函数 作为 其 外 部 函数 的 返回 
值 ， 又 可 以 先 定义 函数 再 将 函数 名 赋值 给 一 个 变量 ，JavaScript 的 这 一 功能 扩展 了 闭 包 的 
应 用 范围 。 
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1. 使 用 分 行 且 缩 排 的 连 级 编程 模式 改写 【 例 15-7】。 

2. 完全 使 用 CSS 样式 表 实 现 【 例 15-9】 的 表格 数据 隔行 变色 。 

3. 在 【 例 15-9】 中 ， 能 否 将 CSS 样式 表 中 的 子 元 素 结合 符 蔡 换 为 后 代 结 合 符 ? 为 什 
么 ? 请 通过 上 机 编程 验证 你 的 分 析 和 判断 。 

4. 编写 jQuery 程序 实现 “在 网 页 上 漂浮 的 图 片 链接 ”。 

5. 编写 jQuery 程序 实现 “自动 切换 的 图 片 ”。 

6. 使 用 forin 语句 和 for 语句 输出 以 下 用 JSON 格式 表示 和 组 织 的 数据 (包含 属性 名 
和 属性 值 ) 。 


persons={ 








"Programmers":[ 
{ "firstName":"Bill", "lastName":"Gates", "company":"Microsoft" }, 
{ "firstName":"Mark", "lastName":"Zuckerberg", "company":"Facebook" }, 
{ "firstName":"Steve", "lastName":"Jobs", "company":"Apple" } 

]， 


"Musicians":[ 
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{ "name":"Beethoven", "nationality":"Germany", "works":"Ninth Symphony" }, 
{ "name":"Tchaikovsky", "nationality":"Russia", "works":"Swan Lake" }, 


{ "name":"Chopin", "nationality":"Poland" } 







"Authors" 
{ "name" 言 "，"book":" 红 高 梁 "”}， 
{ "name" Em ， "book" : "妻妾 成 群 " } ， 


{ "name" ， "book" : "尘埃 落 定 ”} 


] 
] 7 


7. 参照 【 例 15-17】 分 析 并 判断 下 列 哪 几 组 语句 能 够 创建 表格 框架 〈 包 括 标题 、 表 
格 头 和 表格 体 ) ? 通过 上 机 编程 验证 你 的 分 析 和 判断 。 
Ch 


$ ("<table></table>") 
.append ("<caption></caption>") 
.append ("<thead></thead>") 
.append ("<tbody></tbody>"); 

$ ("table") .appendTo ("body"); 


C23 


tableNode=$ ("<table></table>") 
.append ("<caption></caption>") 
.append ("<thead></thead>") 
.append ("<tbody></tbody>"); 

tableNode.appendTo ("body"); 


(3) 


$ ("body") .append ("<table></table>"); 

$ ("table") .append ("<caption></caption>"); 
$ ("caption") .before("<thead></thead>"); 

$ ("<tbody></tbody>") .insertAfter ("thead"); 


(4) 


$ ("body") .append ("<table></table>"); 
$ ("table") .prepend ("<tbody></tbody>"); 
$ ("<caption></caption>") .after ("<thead></thead>") .prependTo ("table"); 


8. 为 【 例 15-17] 动 态 生成 的 表格 添加 表现 ， 使 表格 数据 隔行 变色 , 可 参考 【习题 2】。 

9. 参考 【 例 15-22】， 分 析 以 下 JavaScript 片段 的 作用 ， 并 判断 其 执行 过 程 中 各 个 警 
告 框 中 的 输出 。 通 过 上 机 编程 验证 你 的 分 析 和 判断 。 

<script type="text/javascript"> 


function makeAdder (x) { 
return function(y) { 
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alert ("x="+x+", y="+y); 
return x+y; 
}; 
} 


Var addl0=makeAdder (10); 

alert (typeof add10); 

alert (add10 (3)); 
</script> 


10. 参考 【 例 15-23】， 使 用 纯 JavaScript (不 使 用 jQuery) 实现 表格 数据 排序 。 

11. 在 【 例 15-23】 表 格 数据 排序 的 基础 上 ， 再 实现 表格 数据 隔行 变色 ， 可 参考 【 习 
题 2】。 

12. 分 析 并 阐述 【 例 15-23】 如 何 按照 “分 离 ”原则 将 “内 容 和 结构 ”“ 表 现 ” 与 “ 行 
为 ”安排 在 HTML 文档 中 的 不 同 地 方 。 
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